0

我有一个measure模型,它由两个集合组成,一个beats集合和一个measureRep[reentation] 集合。每个集合分别由beat模型和representation模型组成。

每当measureRep[resentation] 集合发生变化(通过添加或减去representation模型)时,我希望measureView(具有measure模型,因此measureRep[resentation] 集合)使用渲染函数()重新渲染自身。

我通过以下功能在另一个视图中添加新模型:

var representationModel = new RepresentationModel({representationType: newRepType});
StageCollection.get(cid).get('measures').models[0].get('measureRepresentations').add(representationModel);

我可以看到在添加之前和之后正确添加了 themeasure及其measureRep集合,但是,对 的绑定调用measureView没有注册更改并调用渲染函数。我什至将绑定放在模型上,以显示后端正在更新,但是它没有响应。这让我相信视图和模型是解耦的,但这没有意义,因为它最初是从模型中渲染的。以下是相关文件:

measureView.js [视图]:

define([...], function(...){
  return Backbone.View.extend({

    initialize: function(options){
      if (options) {
        for (var key in options) {
          this[key] = options[key];
        }
        this.el = '#measure-container-'+options.parent.cid;
      }

      window.css = this.collectionOfRepresentations; //I use these to attach it to the window to verify that the are getting updated correctly
      window.csd = this.model;  // Same
      _.bindAll(this, 'render'); // I have optionally included this and it hasn't helped
      this.collectionOfRepresentations.bind('change', _.bind(this.render, this));

      this.render();
    },

    render: function(){
      // Make a template for the measure and append the MeasureTemplate
      var measureTemplateParameters = { ... };
      var compiledMeasureTemplate = _.template( MeasureTemplate, measureTemplateParameters );
      // If we are adding a rep, clear the current reps, then add the template
      $(this.el).html('');

      $(this.el).append( compiledMeasureTemplate )

      // for each rep in the measuresCollection
      _.each(this.collectionOfRepresentations.models, function(rep, repIndex) {
        var measureRepViewParamaters = { ... };
        new MeasureRepView(measureRepViewParamaters);
      }, this);

      return this;
    },
    ...
  });
});

measure.js [模型]:

define([ ... ], function(_, Backbone, BeatsCollection, RepresentationsCollection) {
  var MeasureModel = Backbone.Model.extend({
    defaults: {
      beats: BeatsCollection,
      measureRepresentations: RepresentationsCollection
    },
    initialize: function(){
      var logg = function() { console.log('changed'); };
      this.measureRepresentations.bind('change', logg);
      this.bind('change', logg);
    }
  });
  return MeasureModel;
});

表示.js [集合]:

define([ ... ], function($, _, Backbone, RepresentationModel){
  var RepresentationsCollection = Backbone.Collection.extend({
    model: RepresentationModel,
    initialize: function(){
    }
  });

  return RepresentationsCollection;
});

我也尝试在measure模型上注册绑定,而不是它的子集合,但都不起作用。

_.bindAll(this, 'render');
this.model.bind('change', _.bind(this.render, this));
4

1 回答 1

1

见:https ://stackoverflow.com/a/8175141/1449799

为了检测模型添加到集合中,您需要监听 add 事件(而不是 change 事件,当集合中的模型更改时会触发http://documentcloud.github.io/backbone/#Events -目录)。

所以试试:

this.measureRepresentations.bind('add', logg);
于 2013-08-23T16:03:25.677 回答