Backbone中的集合和子集合（及其相关视图）

Question

我正在用Backbone创建我的第一个应用程序。基本上，我有一个两层深的无序列表。

<ul class="cabinet"> 
    <li class="drawer"> 
    <a>Drawer 1</a> 
    <ul class="boxes"> 
     <li> Box 1 </li> 
     <li> Box 2 </li> 
    </ul> 
    </li> 
    <li class="drawer"> 
    <a>Drawer 2</a> 
    <ul class="boxes"> 
     <li> Box 3 </li> 
     <li> Box 4 </li> 
    </ul> 
</li> 
</ul> 

在Backbone中，我创建了两个集合（“抽屉”和“盒子”）及其关联的视图。 我的问题是，我不知道我应该如何处理二级清单项目。

此时，我有一个单独的Backbone Collection盒子，每次我将新盒子添加到 集合中，它都会在每个抽屉下呈现。我应该以某种方式将基于父抽屉的一组盒子分开，但我不知道如何在“Backbone方式”中执行此操作。

换句话说，假设我需要将Box 3和Box 4的元素添加到Drawer 2中。 如何在“Drawer 2”下渲染这两个“框”。我应该为每个抽屉的一组盒子分别收藏吗？如果是这样，我如何在Backbone中动态创建一个具有此目的的集合？有没有其他方法？

Answer 1

首先，从您的描述来看，Drawer应该是一个模型，而不是一个集合。你可以有一个名为Drawers的集合，它将包含Drawer的实例。

二，有两种主要方法可以做到这一点。您选择的哪种方法实际上取决于您更准确地表示盒子和抽屉之间的关系以及哪种方法能够有效处理您的数据。

1. 如果框组主要与他们的父母抽屉，那么，当你初始化每个抽屉，给它一个箱子集合：

   var drawer_set = []; 
   
   var args = { 
       label: 'Drawer 1', 
       boxes: new Boxes() 
   }; 
   
   drawer_set.push(new Drawer(args)); 
   
   var drawers = new Drawers(drawer_set);

2. 如果你希望能够快速运行您所有的箱子过程中，你会希望两个集合：箱子一个和一个抽屉，每个箱子都有一个属性说法，其中抽屉它在

   var args = { drawer: 1 }; 
   var box = new Box(args); 
   var boxes = new Boxes(boxes);

然后，您可以通过由框中选择你的抽屉：

var boxes_in_drawer_1 = boxes.where({drawer: 1});