Коллекции и вложенные коллекции в Backbone (и связанные с ними представления)

Я создаю свое самое первое приложение с 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 для ящиков, и каждый раз, когда я добавляю новый ящик в коллекцию, он будет отображаться под каждым ящиком. Я должен каким-то образом разделить группу ящиков на основе родительского ящика, но я не знаю, как я могу сделать это «путем магистрали».

Другими словами, допустим, мне нужно добавить элементы Box 3 и Box 4 в ящик 2. Как я могу отобразить эти два «блока» в «Ящике 2». Должен ли я иметь отдельную коллекцию для каждой группы ящиков? Если да, то как я могу динамически создать коллекцию для этой цели в Backbone? Есть ли другой способ?


javascript backbone.js backbone-views backbone.js-collections
person sica07    schedule 11.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, из вашего описания следует, что 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});
person fourthnen    schedule 11.03.2013
comment
да, это Drawers (коллекция). Я думаю, что первый метод, который я должен использовать в моем случае. Большое спасибо за ваши предложения! - person sica07; 12.03.2013