如何使一个视图意识到他人的变化？ [英] 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.

推荐答案

您可以做一个简单的模型来保存应用程序的状态，你并不需要什么特别的，只是数据的一个袋子，实现普通主干事件方法：

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();

然后流派列表视图会听click事件（因为你已经拥有），并设置当前体裁上的应用程序状态模型时，有人更改它​​：

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() });
    },
});

对个人风格的观点会听：在应用程序状态模型改变流派事件和流派的变化作出反应：

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/

您可以为您希望和模型都是在骨干数据事件工作的一种便捷方式的任何数据让模特。作为额外的奖励，这种做法使得它很容易坚持您的应用程序的状态：只要加上平时的骨干持久性支持，以届时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.

如果你只需要一个简单的事件总线推着非数据事件，您可以使用骨干 活动 方法来构建一个简单的事件聚合：

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);

那么，假设你有一个全球性的应用命名空间，你可以说这样的事情：

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屋！