如何让一个视图知道另一个视图的变化? [英] How to make one view aware of another's changes?

问题描述

假设您正在制作一个音乐库应用.

Suppose you are making a music library app.

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

You have one view with a list on genres and another that shows the contents of the selected genre. When the user clicks a genre on the list, the contents in the other view should be updated accordingly.

这样做的最佳方法是什么，以便将依赖关系降至最低?

What is the best way to do this so that there are minimal dependencies?

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

I have not found any other place to listen to the mouse clicks than the view that draws the individual genre. I can send an event from there, but what is the optimal way of getting that event to update the other view which draws the genre contents? Who should listen to that event, the genre content view or its collection?

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

I instantiate both views from the router of the app and I did manage to get this to work by making the views aware of each other, but that's not optimal of course.

推荐答案

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

You could make a simple model to hold the application state, you don't need anything fancy, just a bag of data that implements the usual Backbone event methods:

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

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

Then the genre list view would listen for click events (as you already have) and set the current genre on the app-state model when someone changes it:

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" 事件，并随着流派的变化做出反应:

The view for the individual genre would listen for "change:genre" events on the app-state model and react as the genre changes:

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 中即可.

You can make models for any data you want and models are a convenient way of working with data events in Backbone. As an added bonus, this approach makes it fairly easy to persist your application's state: just add the usual Backbone persistence support to AppState and away you go.

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

If you only need a simple event bus to push non-data events around, you can use Backbone's Events methods to build a simple event aggregator:

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

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

Then, assuming you have a global app namespace, you can say things like this:

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

和

app.events.trigger('some-event', arg1, arg2, ...);

这篇关于如何让一个视图知道另一个视图的变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！