骨干视图不侦听模型更改

Backbone view not listeningTo a model change

本文关键字:模型 视图      更新时间:2023-09-26

数据结构:

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

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

代表模型:

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;
});

度量表示视图:

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'));
    }
  });
});

更改事件仅在使用model.set进行更改时触发。不能只分配新属性。Backbone 不使用 defineProperty 样式,它是一种更明确的样式。

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