Ответ 1

Чтобы создать список строк таблицы с Магической сетью Магистраль, вам нужно определить пять вещей:

• Модель для каждой строки
• Коллекция для хранения всех моделей строк
• A CollectionView для итерации по коллекции
• ItemView, чтобы обеспечить функциональность, специфичную для строки
• Шаблон для ItemView, который обеспечивает разметку для каждой строки

Пример использования примера

Скажите, что у вас есть следующие данные:

var stooges = [{ name: 'moe', age: 44, userid: 1}, 
               { name: 'larry', age: 44, userid: 2}, 
               { name: 'curly', age: 44, userid: 3}];

Определить модель и коллекцию

Для следующих данных вы хотите иметь модель:

var StoogeModel = Backbone.Model.extend({});

где вы можете настроить некоторые разумные значения по умолчанию для ваших данных и других свойств, например idAttribute. Существует множество ссылок на то, как настроить вашу модель. Ваша коллекция должна, как минимум, взять stoogeModel.

var StoogeCollection = Backbone.Collection.extend({
  model: StoogeModel
});

Настройте свои представления

Чтобы выполнить итерацию вашей коллекции в таблицу, вам понадобится CollectionView и ItemView.

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName: "table",
  childView: StoogeItemView
});

Для всех CollectionViews требуется минимум a childView, который является ItemView (который мы определяем ниже), который они будут использовать для получения функциональных возможностей для создания html для каждой строки, а collection, который является коллекции, содержащие модели, которые заполняют каждую строку. Мы передадим эту коллекцию, когда мы установим stoogesCollectionView. Свойство tagName указывает Backbone для инкапсуляции дочерних элементов в тег table.

var StoogeItemView = Backbone.Marionette.ItemView.extend({
  tagName: "tr",
  template: '#stooge-template'
});

<script type="text/template" id="stooge-template">
  <td id="name"><%= name %></td>
  <td id="age"><%= age%></td>
  <td id="userid"><%= userid%></td>
</script>

Все ItemViews требуют шаблона, который мы определяем в нашем HTML-документе, здесь #stooge-template. Если ItemView является дочерним элементом коллекции, вам не нужно определять его модель, она будет предоставлена ​​родительским CollectionView. HTML, отображаемый каждым дочерним элементом StoogeItemView, будет инкапсулирован тегами tr, потому что мы хотим, чтобы это была строка для каждого дочернего элемента коллекции.

Из ItemView вы можете обрабатывать события на уровне "строка", например click или focus в столбце строки. Вы также можете обрабатывать изменения в переданной модели. Кроме того, из ItemView вы можете решить передать в помощники, которые могут манипулировать способом отображения данных в своем шаблоне.

Объединяя все вместе

Теперь мы определили нашу модель, коллекцию, представление коллекции, представление дочерних элементов и шаблон представления элемента. Затем мы соединим все эти части.

Заполните свою коллекцию

Вы передаете массив марионеток в конструктор вашей коллекции.

var myStooges = new StoogeCollection(stooges);

Они формируются в модели, и они загружают вашу коллекцию.

Отрежьте свой CollectionView

Вы передаете свою загруженную коллекцию в свой коллекционный вид.

var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

Измените свой вид

Все виды марионеток поставляются в комплекте с помощью метода render. В нашем случае вызов

myStoogesView.render();

создаст <table> с тремя элементами <tr>, каждый из которых содержит столбец для полей name, age и userid в нашем наборе данных. Чтобы вставить полученный HTML в DOM, мы просто используем свойство view el. Для упрощения мы можем ввести вид прямо в тело

document.body.appendChild(myStoogesView.el);

или с помощью jQuery:

$(document.body).append(myStoogesView.el);

Помимо этого примера

Существует много функциональных возможностей, о которых мы даже не начали обсуждать. Прочтите docs! И проверьте много много учебников. Надеюсь, что это краткое введение поможет!