视图之间的主干.js 事件

Question

我在 Backbone.js 中有两个视图，每个视图都有自己的 html 选择元素。 在第一个列表选择事件上，我希望触发一个事件，提醒第二个视图（选择元素）接收事件并触发更新。

我的问题在于初始选择更改方法被调用并引发事件，尽管第二个视图从未注册它。

 define([
 'jquery',
 'underscore',
 'backbone',
 'models/user/UserModel',
 'collections/teams/TeamsCollection',
 'models/team/TeamModel'
 ], function ($, _, Backbone, UserModel, TeamsCollection, TeamModel) {

var ClubSelectView = Backbone.View.extend({
    el: "#clubList",
    events: {
        "select #clubList option": "optionSelected"
    },
    initialize: function () {
        var that = this;
        var user = UserModel;
        this.model = user;
        this.model.on('change', this.updateTeams, this);
        var teams = new TeamsCollection();
        this.collection = teams;
        this.createEasyDropDown();
    },
    optionSelected: function () {
        alert("optionSelected"); //this alert is called
        this.trigger("teamSelect:change", "Team selected from dropdown items");  
    },....

第二个视图监听“teamSelect:change”触发器

 define([
'jquery',
'underscore',
'backbone',
'models/user/UserModel',
'collections/matches/MatchesCollection',
'models/match/MatchModel'
], function ($, _, Backbone, UserModel, MatchesCollection, MatchModel) {
var MatchSelectView = Backbone.View.extend({
el: "#fixtureList",
events: {

},
initialize: function () {
    var that = this;
    var user = UserModel;
    var teams = new MatchesCollection();
    this.collection = teams;
    this.createEasyDropDown();
    this.on("teamSelect:change", function (msg) {
        alert("teamSelect:change " + msg); //never triggered
    });
},

任何关于如何正确设置视图之间触发器的帮助都会很棒！干杯

Answer 1

在您的第一个视图中，ClubSelectView 在这一行：

this.trigger("teamSelect:change", "Team selected from dropdown items");  

“this”指的是ClubSelectView。但是，在您的第二种观点中：

this.on("teamSelect:change", function (msg) {
    alert("teamSelect:change " + msg); //never triggered
});

“这个”指的是MatchSelectView。这意味着它正在自己监听事件“teamSelect:change”。但是该事件不是在其自身上触发，而是在第一个视图上触发。这是Marionette（Backbone 的插件）旨在解决的主要问题之一。它提供了一个事件聚合器，它对您的整个应用程序都是全局的。所有视图都可以监听聚合器上的事件并做出响应。在您当前的设置中，您必须从第一个视图 ClubSelectView 获取对第二个视图的引用，然后在该对象上触发事件，而不是在 this 上。