0

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

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

1 回答 1

0

View 仅用于模型的视觉显示。请详细说明对 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
于 2012-01-23T12:53:08.570 回答