backbone.js - 监听集合添加/更改作为 View 的模型属性

Question

我有一个 Measure View，它有一个关联的 Measure Model，它有两个集合，RepresentationsCollection 和 BeatsCollection。 Measure View 具有嵌套的子 Representation View ，每个 View 都有自己的表示模型，并且所有表示模型共享对 Measure View 的 BeatsCollection 的引用的相同属性。

我知道如果您正在收听 change事件，添加内容时集合不会响应。你应该使用绑定(bind)。文档不是最好的。因此，如果子表示 View 如下所示:

representation.View = Backbone.View.extend({
  initialize: function(options) {
    // this.beatsCollection is a reference to the Parent Measure View attribute beatsCollection which is a collection
    this.model.listenTo(this, 'change:beatsCollection', this.render);
    this.model.on('change:beatsCollection', this.render, this);
    this.bind.listenTo(this, 'change:beatsCollection', this.render);
  },

这是模型:

representation.Model = Backbone.Model.extend({
  initialize: function(options) {
    console.log(options); 
    this.idAttribute = options.idAttribute;
    this.type = options.type;
    this.beatsCollection = options.beatsCollection;
 } 

如何监听此 View 关联模型上的属性，该模型具有链接到另一个模型上的集合的属性？

这是 Plnkr: http://plnkr.co/edit/z4mWqo1v0nDe13TiB9r3?p=preview
首先单击“添加表示”。
其次，单击“添加节拍”并注意节拍数不会更新。
第三，如果您再次单击“添加表示”，它将添加另一个具有正确节拍数的表示。
在 Representation.js View 中，当任何同级 View 单击“添加节拍”时，我们如何让表示 View 重新渲染

Answer 1

更新的 Plnkr:http://plnkr.co/edit/JtyxnhaGlPVijhbRPt5v?p=preview

技巧就在这里。查看替换

initialize: function(options) {
  if(options.model){this.model=options.model;}
  this.model.listenTo(this, 'change:beatsCollection', this.render);
  this.model.on('change:beatsCollection', this.render, this);
  this.model.on('change:beatsCollection', this.render, this);
  //this.model.on('destroy', this.remove, this);
},

和

initialize: function(options) {
  if(options.model){this.model=options.model;}
  this.listenTo(this.model.beatsCollection,  'add remove reset', this.render);
},