骨干视图不听模型更改

时间:2013-09-07 14:05:59

标签: javascript backbone.js

数据结构:

- Measure (collection)
  - Measure (model)
     - beats (c)
       - beat (m)
         - on/off (attribute)
     - representations (c)
       - representation (m)
         - currentType (attribute)
         - previousType (a)

通过转换函数调用表示模型,我注意到通过控制台打印输出的更改,但是View根本没有注册更改。我可以访问点击事件,因此我知道视图的el是正确的。为什么listenTo在视图中不起作用?

代表模型:

define([
  'underscore',
  'backbone'
], function(_, Backbone) {
  var RepresentationModel = Backbone.Model.extend({
    initialize: function(options){
      this.representationType = options.representationType;
      this.previousRepresentationType = undefined;
    },
    transition: function(newRep){
      this.previousRepresentationType = this.representationType;
      this.representationType = newRep;
      console.error('model change : ' + this.previousRepresentationType + ' ' + this.representationType);
    }
  });
  return RepresentationModel;
});

measureRepresentation查看:

define([…], function(…){
  return Backbone.View.extend({
    initialize: function(options){
      if (options) {
        for (var key in options) {
          this[key] = options[key];
        }
      }
      //Dispatch listeners
      …
      //Binding
      //this was the old way, so I changed to the new listenTo to take advantage of when the view is destroyed.
      //this.model.bind('change', _.bind(this.transition, this));
      this.listenTo(this.model, 'change', _.bind(this.transition, this));

      this.render();
    },

    render: function(){
      // compile the template for a representation
      var measureRepTemplateParamaters = {…};
      var compiledTemplate = _.template( MeasureRepTemplate, measureRepTemplateParamaters );
      // put in the rendered template in the measure-rep-container of the measure
      $(this.repContainerEl).append( compiledTemplate );
      this.setElement($('#measure-rep-'+this.measureRepModel.cid));

      // for each beat in this measure
      _.each(this.parentMeasureModel.get('beats').models, function(beat, index) {
          measurePassingToBeatViewParamaters = {…};
        };
        new BeatView(measurePassingToBeatViewParamaters);
      }, this);

      return this;
    },

    transition: function(){
      console.warn('getting in here'); //NEVER GET HERE
      console.log(this.model.get('previousRepresentationType') + '|' + this.model.get('representationType'));
    }
  });
});

1 个答案:

答案 0 :(得分:2)

更改事件仅在您使用model.set进行更改时触发。您无法分配新属性。 Backbone没有使用defineProperty风格,它是一种更明确的风格。

this.set({
  previousRepresentationType: this.representationType,
  representationType: newRep
});