Question

我有以下型号：

    App.Item = Backbone.Model.extend({
            urlRoot : '/item',
            // Default attributes
            defaults: {
                user_has_liked: false,
            },
            initialize: function(){
                this.on('item-id-changed', this.onItemIdChange);
            },
          onItemIdChange: function(itemId){
            console.log('item id change');
            this.set({'id': itemId});
            var that = this;
            this.fetch({
                success: function (item) {

                }
            })  
        },

单击

以及以下触发器：

在我的另一个视图中，这不是该模型绑定到我的视图：

loadNewItem: function(ev) {
        ev.preventDefault();
        var self =  $(ev.currentTarget);
        var itemId = $(self).attr('data-item-id');
        //trigger a new event for listener
        if (itemId) {
            console.log('triggger');
            this.trigger('item-id-changed', itemId);
        }
    },

为什么永远不会调用onItemIdChange？

Answer 1

尝试改变这个：

this.on('item-id-changed', this.onItemIdChange);

到此：

this.on('change:item-id-changed', this.onItemIdChange, this);

Answer 2

如果你在视图中写这个，

使用this.model.trigger('item-id-changed', itemId);

此处this将引用视图，因此您需要引用模型（触发模型是正确的方法）。

Answer 3

所以<{p>}中的this

this.trigger('item-id-changed', itemId)

是视图，而this位于

中

this.on('item-id-changed', this.onItemIdChange)

是模特。如果某个Backbone对象o正在触发事件，那么您必须o.on(...)通知这些事件。您正在触发视图上的事件，但在模型上侦听这些事件，因此没有任何有用的事情发生。

我觉得你真的想要一个全球事件总线：

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

其中app是应用程序的全局命名空间。然后你会说：

app.events.trigger('item-id-changed', itemId);

在您的视图中，您的模型会：

app.events.on('item-id-changed', this.onItemIdChange, this);

请注意on的第三个context参数，以确保this内的onItemIdChange符合您的预期（即模型）。或者，您可以在模型的构造函数中使用_.bind或_.bindAll将方法绑定到实例，然后您不需要第三个参数on。

当模特消失时，别忘了拨打off。

以下是该技术的简化演示：http://jsfiddle.net/ambiguous/dc523/

事件和触发器不适用于模型和视图

3 个答案: