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 for boxes，每次我添加新的Box 该系列将在每个抽屉下呈现。我应该以某种方式根据父抽屉分开盒子组，但我不知道如何以“Backbone方式”进行此操作。

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

Answer 1

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

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

如果盒子组主要与其父抽屉相关，那么，当您初始化每个抽屉并给它一个Boxes集合时：

var drawer_set = [];

var args = {
  label: 'Drawer 1',
  boxes: new Boxes()
};

drawer_set.push(new Drawer(args));

var drawers = new Drawers(drawer_set);

如果您希望能够在所有盒子上快速运行进程，您可能需要两个集合：一个盒子和一个抽屉，其中每个盒子都有一个属性，说明它所在的抽屉。
```
var args = { drawer: 1 };
var box = new Box(args);
var boxes = new Boxes(boxes);
```

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

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

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

1 个答案: