4

假设您正在制作一个音乐库应用程序。

您有一个视图，其中包含流派列表，另一个视图显示所选流派的内容。当用户点击列表上的一个流派时，另一个视图中的内容应该相应地更新。

什么是最好的方法来做到这一点，以便有最小的依赖？

除了绘制单个流派的视图之外，我还没有找到任何其他地方可以聆听鼠标点击。我可以从那里发送一个事件，但是让该事件更新绘制流派内容的另一个视图的最佳方法是什么？谁应该收听该事件、流派内容视图或其集合？

编辑：我从应用程序的路由器实例化了两个视图，我确实设法通过使视图相互了解来使其工作，但这当然不是最佳的。

4

2 回答 2

14

您可以制作一个简单的模型来保存应用程序状态，您不需要任何花哨的东西，只需要一个实现常用 Backbone 事件方法的数据包：

var AppState  = Backbone.Model.extend({});
var app_state = new AppState();

然后流派列表视图将侦听点击事件（正如您已经拥有的）并在有人更改时在应用状态模型上设置当前流派：

var Genres = Backbone.View.extend({
    //...
    choose: function(ev) {
        // This would be the click handler for the genre,
        // `.html()` is just for demonstration purposes, you'd
        // probably use a data attribute in real life.
        app_state.set({genre: $(ev.target).html() });
    },
});

单个流派的视图会监听"change:genre"应用状态模型上的事件，并随着流派的变化做出反应：

var Genre = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'change_genre');
        app_state.on('change:genre', this.change_genre);
    },
    //...
    change_genre: function() {
        // Refill the genre display...
    }
});

演示：http: //jsfiddle.net/ambiguous/mwBKm/1/

您可以为所需的任何数据制作模型，模型是在 Backbone 中处理数据事件的便捷方式。作为一个额外的好处，这种方法使持久化应用程序状态变得相当容易：只需添加通常的 Backbone 持久性支持即可AppState。

如果你只需要一个简单的事件总线来推送非数据事件，你可以使用 Backbone 的Events方法来构建一个简单的事件聚合器：

app.events = _.extend({}, Backbone.Events);

然后，假设你有一个全局app命名空间，你可以这样说：

app.events.on('some-event', some_function);

和

app.events.trigger('some-event', arg1, arg2, ...);
于 2012-05-22T07:46:03.007 回答
1

我见过的最好的方法是Derick Bailey提出的方法。简而言之，您可以创建一个事件聚合器，它提供一个集中的对象来引发不同视图可以订阅的事件。这个解决方案的美妙之处在于它利用了 Backbone 现有的事件系统，实现起来非常简单。

于 2012-06-04T04:04:01.823 回答