modelEvents和this.model.on有什么区别

时间:2016-12-21 14:32:40

标签: marionette

        var ContactManager = new Marionette.Application();

        ContactManager.addRegions({
            mainRegion: "#main-region",
            child:"#child2"
        });

        Ar  = Backbone.Model.extend({});
        Se = Backbone.Model.extend({});
        Articlescollection = new Ar({ product_id: "104", title: "Test title"});
        SelectedsCollection = new Se({ product_id: "71", title: "Test title"});


       ContactManager.StaticView = Marionette.ItemView.extend({
            template: tpl2,
            tagName: "div",
           model:Articlescollection,
           modelEvents: {
               'change': 'fieldsChanged'
           },
           fieldsChanged:function(){
               console.log('dddd')
           },

           initialize: function () {
              this.model.on('change', this.render);
           }
        });


        ContactManager.StaticView2 = Marionette.ItemView.extend({
            template: tpl2,
            tagName: "div",
            model:SelectedsCollection
        });


        var MyLayout = Backbone.Marionette.LayoutView.extend({
            template: tpl3,

            regions: {
                menu: "#menu",
                content: "#content"
            }
        });

        ContactManager.on("start", function() {



           // ContactManager.mainRegion.show(  new MyLayout     )

            var layout = new MyLayout
            ContactManager.mainRegion.show(  layout )
            layout.menu.show(new ContactManager.StaticView());
            layout.content.show(new ContactManager.StaticView2())

            Articlescollection.set("product_id", 24) 
//init fieldsChanged trigger for change model
        })

        ContactManager.start();

modelEvents和this.model.on之间有什么区别?

当模型发生变化时,它们都会启动但

modelEvents:{        '改变':this.render    },

抛出异常未捕获的TypeError:无法读取属性' split'未定义的

1 个答案:

答案 0 :(得分:1)

modelEventsthis.listenTo(this.model, { 'change': 'fieldsChanged' });相同它只是糖,因此您不必将其添加到initialize。您可能从不在视图中使用this.model.on。这不会像this.listenTo那样自动清理。除了this.on之外,我不认为on一般应该使用listenTo更安全。

这里的另一个主要区别是:

var model = this.model;
var view = this;
this.model.on('change', function() {
  this === model; // true
  this === view; //false
});

这与render一起使用的唯一原因是因为render被强制绑定到了视图。任何其他功能都有不同的范围。您可以通过将其作为on的第三个变量传递来更改范围,但是再次需要this.model.off中的onBeforeDestroy

如果您想从render致电modelEvents,您可以选择以下几种方式:

modelEvents: {
  'change': 'render'
}
//or
modelEvents: function() {
  return {
    'change': this.render
  };
}
// or 
modelEvents: {
  'change': function() { this.render(); }
}