Backbone在初始化时没有看到Model更改。这是正常的吗?

时间:2015-09-15 13:22:39

标签: javascript backbone.js javascript-events initialization listener

在模型初始化时,它设置了一些参数。在View初始化是必须捕获该事件的侦听器。但它并没有。但是它可以在以下事件(如按钮的单击)上执行此操作。所以问题:

  • 这是正常行为吗?
  • 如果是,那么
  • 的目的是什么
  • 如果没有,我的错误是什么?

游戏的地点在这里:http://plnkr.co/edit/ddIZrkoI1n1CE6YrvMrC?p=preview

$(function(){
  var Mod = Backbone.Model.extend({
    defaults:{
          test:null
    },
    initialize: function(){
      this.set('test', 'hello');
      console.log(this.attributes);
    }
  });
  var Vw = Backbone.View.extend({
    events : {
      'click #btn-change' : function(){
        var mod_value = $('[name="data-input"]').val();
        console.log('mod_value: '+mod_value);
        this.model.set('test', mod_value);
      }
    },
    initialize: function(){
      console.dir({
        model: this.model,
        view: this
      }); 
      this.listenTo(this.model, 'change', function(){
        console.log('%cModel changed', 'font-size:18px; color: navy');
        console.log({
          model_changed: this.model.changed,
                    keys: _.keys(this.model.changed),
                    attributes: this.model.attributes
        });
        $('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
      });
    }
  });
  var md = new Mod(), nv = new Vw({
    model: md,
    el:$('body')
  });
});

1 个答案:

答案 0 :(得分:1)

如果你需要在模型的初始化中设置事件,那么model.changed不会改变到下一个set,并且你的处理程序不依赖于给定的参数通过该事件,您可以在视图的初始化中手动调用更改事件处理程序,如Altered Plunker,或使用model.trigger('change', ...)来触发更改处理程序。

$(function(){
  var Vw = Backbone.View.extend({
    events : {
      'click #btn-change' : function(){
        var mod_value = $('[name="data-input"]').val();
        console.log('mod_value: '+mod_value);
        this.model.set('test', mod_value);
      }
    },
    initialize: function(){
      console.dir({
        model: this.model,
        view: this
      }); 
      // Pull the handler out as an attr of view's
      this.listenTo(this.model, 'change', this.onModelChanged);

      // Manually call the handler to get the changes made by mode's 
      // initialization.
      this.onModelChanged();
    },
    onModelChanged: function(){
        console.log('%cModel changed', 'font-size:18px; color: navy');
        console.log({
          model_changed: this.model.changed,
                    keys: _.keys(this.model.changed),
                    attributes: this.model.attributes
        });
        $('#new-data').html('<h4>Model is changed</h4>'+this.model.get('test'));
    }
  });
  var Mod = Backbone.Model.extend({
    defaults:{
      test:null
    },
    initialize: function(){
      this.set('test', 'hello');
      console.log(this.attributes);
    }
  });

  var md = new Mod(), nv = new Vw({
    model: md,
    el:$('body')
  });
});