javascript - Backbone 中的集合和子集合(及其相关 View )

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 中，我创建了两个集合(“Drawers”和“Boxes”)及其关联的 View 。 我的问题是我不知道应该如何处理二级列表项。

此刻，我有一个盒子的 Backbone 集合，每次我添加新的盒子 集合，它将在每个抽屉下呈现。我应该以某种方式根据父抽屉将盒子组分开，但我不知道如何以“ Backbone 方式”做到这一点。

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

Answer 1

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

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

1. 如果盒子组主要与其父抽屉相关，那么，当您初始化每个抽屉并为其提供一个 Boxes 集合时:

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

2. If you want to be able to quickly run processes on all of your boxes, you would want two collections: one of boxes and one of drawers, where each box has an attribute saying which drawer it's in.

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

Then, you can select your drawers by box via:

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