与backbone.js 的多对多关系事件

Question

我与在服务器端使用数据透视表实现的两个backbone.js 模型建立了多对多关系。我正在尝试弄清楚如何在客户端构建它。我当前的结构是：
1）我有一个标签模型和一个呈现复选框和标签标签的TagView，我在复选框上有一个选中事件，目前什么也不做。

• 我有一个 TagsCollection，其中包含一堆标签。
• 我有一个 TagsCollectionView，它绑定 TagsCollection 的添加、重置等，并为添加的标签添加 TagView，呈现它们，并将 html 附加到其当前 html （重置时，html 被重置）。
• 我有一个全局 TagCollection 实例，其中包含所有可能的标签
• 我有一个 Notes 模型，其中包含一个在 init 上称为 selectedtags 的（空）TagCollection。
• 服务器为每个注释返回一组选定的 tagid，我将其添加到其 TagCollection 中。
• 现在是最困难的部分，将它们捆绑在一起..我的NotesView有自己的TagsCollectionView，它绑定到全局TagsCollection（因此它可以列出所有标签）..现在，我如何在其复选框上获取选中事件子 TagViews 来触发添加到此 Notes 模型的选定标签？我是否应该向 init 上的 TagsCollectionView 提供对此 Notes 模型实例的引用，然后将其提供给它创建的所有 TagView，然后其选中的事件从该模型添加/删除项目？这是我能弄清楚如何做到这一点的最好方法，任何其他想法将不胜感激。

Answer 1

视图仅用于模型的视觉显示。请更详细地指定对 TagsCollectionView 的需求：

1. 使用更改事件来检查复选框。
2. 我建议增量编码。首先使用 Tag 和 TagView，当它工作时，继续添加集合来保存标签。之后您可以添加注释。这是一个“分而治之”:)
3. 不要与整个设计混淆，当你开始时它非常简单。

由于缺乏需求细节，我无法提供整个设计。但是，我认为下面的代码应该触发您设计的起点。

var TagsCollectionView=Backbone.View.extend({
 el:$(), 
});

var Tag=Backbone.Model.extend({
  defaults:{
   // define the default properties
  }
});

var TagView=Backbone.View.extend({
  el:$("body"),
  events:{
   'change #checkBox':'customFunction'
  },
  initialize: function(){
   _.bindAll(this, 'render','customFunction');
   this.render();   
  },  
  render:function(){
   var tag=new Tag();
   // code to render the checkbox and label
  },
  customFunction:function(){
   // whatever you want to do after checking event of checkbox
  }
});

// collection to collect all the tags
var TagCollection=Backbone.Collection.extend({
  model:Tag
});

var Notes=Backbone.Model.extend({
  defaults:{
   'tagCollection':TagCollection
  }
});

// you do not require TagsCollectionView