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

Posted 2023-02-22

【中文标题】与backbone.js的多对多关系事件

【英文标题】：Many to many relationship events with backbone.js

【发布时间】：2012-02-16 19:00:39

【问题描述】：

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

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

【问题讨论】：

根据注释，首先更新工作模型和复选框和标签的视图。然后用集合更新代码。

【参考方案1】：

视图仅用于模型的视觉显示。请详细说明对 TagsCollectionView 的需求：

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

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

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

【讨论】：

你还没有告诉我任何我在问题中没有说明的事情吗？ TagCollectionView 绑定到 TagCollection，因此添加到该 tagcollection 将自动导致关联的 TagView 被呈现并添加到父元素（例如，div）。您也没有回答任何问题（customFunction 如何将标签添加到其父注释实例？）。

我已经更新了指南。 1.首先创建tagView的实例。 2. 创建 Tag() 的实例并渲染标签，这样 change 事件就会起作用。