仅当再次调用 model.on 时，Backbone.js 模型才触发更改

Question

这是我在这里的第一篇文章，所以请善待；）我正在尝试创建一个 Backbone+requireJS 示例应用程序，但偶然发现了一个奇怪的问题。在我看来，初始化函数我通过

绑定到模型更改事件

this.model.on("change", this.change());

加载数据并且一切正常时正确触发事件。在我看来，我还绑定到单击事件。单击时，我尝试更改其中一个属性，并希望发生更改事件，但它从未发生。

我在 stackoverflow 上尝试了一些推荐的东西（here、here、and there），但没有运气。

我觉得这与事件绑定有关。当我尝试在单击回调中的更改事件上再次绑定到模型时，它开始工作。所以现在我坐在这里，我，嗯，很困惑。有人能解释一下这个问题吗？

我的观点：

define(
[
  'jquery',
  'underscore',
  'backbone',
  'text!templates/news/newsListItem.html'
 ],
 function($, _, Backbone, newsListItemTemplate)
 {
    var NewsListItemViewModel = Backbone.View.extend({
        tagName: 'li',
        events: {
            "click a" : "onLinkClick"
        },
        initialize: function(){
            this.model.on("change", this.changed());
        },
        render: function()
        {
            this.$el.html(_.template(newsListItemTemplate, this.model.toJSON()));
        },
        changed: function()
        {
            this.render();
            console.log("changed");
        },
        //GUI functions
        onLinkClick: function(e)
        {
            console.log("click!");
            this.model.toggle();
            this.model.on("change", this.changed());

        }

    });

    var init = function(config){
        return new NewsListItemViewModel(config);
    }

    return {
        init : init
    }
 }

);

我的模特：

define(
['jquery', 'underscore', 'backbone'],
function($, _, Backbone){

    var NewsListItemModel = Backbone.Model.extend({
        toggle: function() {
            this.set('done', !this.get('done'));
            this.trigger('change', this);
        }
    });

    var init = function(data)
    {
        return new NewsListItemModel(data);
    }

    return {
        init: init,
        getClass: NewsListItemModel
    };
}

);

感谢您的任何意见:)

Answer 1

首先，您应该使用 函数 作为事件处理程序 - 而不是它的结果。 因此，将行改为：

this.model.on("change", this.changed.bind(this));

就目前而言，您实际上只触发了一次 this.changed() 函数 - 并将其结果（即 undefined，因为该函数没有 return 语句）分配为模型的 change 事件处理程序.

其次，你不应该在onLinkClick 中重新绑定这个处理程序：一旦绑定，它就会留在这里。看来改用trigger这个事件更合适：

onLinkClick: function(e)
{
  console.log("click!");
  this.$el.toggle();
  this.model.trigger('change');
}