Магистраль: несколько Показать модели для той же модели

Вопрос о новичках:

Контекст: создание списка покупок с основой

У меня есть класс модели, называемый свойствами name, description и tags (array). Я хотел бы создать два представления на основе этой модели или этой коллекции моделей.

В первом представлении будут отображаться все элементы, подобные этому:

<ul>
<li><h3>Item 1 Name</h3>
<p>Item 1 Description</p>
<p>Tag1, Tag2 ,Tag3</p>
</li>
.......
</ul>

Второе представление отобразит список тегов и количество помеченных элементов, таких как:

<ul>
<li>Tag1<span>{count of items tagged with tag1}</span></li>
<li>Tag2<span>{count of items tagged with tag2}</span></li>
<li>Tag3<span>{count of items tagged with tag3}</span></li>
</ul>

Я построил модель, коллекцию и представление для поддержки первого представления. Я хотел бы знать, как правильно использовать существующую модель (или создать новую модель?) Для создания второго представления.

Спасибо заранее...

существующая модель и коллекция элементов (разорвана из примера Todo.js)

window.Item = Backbone.Model.extend({
// Default attributes for a todo item.
defaults: function() {
return {
order: Items.nextOrder()
};
}
});


window.ItemList = Backbone.Collection.extend({

model: Item,

localStorage: new Store("items"),

nextOrder: function() {
  if (!this.length) return 1;
  return this.last().get('order') + 1;
},

comparator: function(item) {
  return item.get('order');
}

});

UPDATE: несмотря на то, что переопределение метода parse() работает при показе имен тегов с количеством элементов, после добавления нового элемента мне не удалось обновить список имен тегов/элементов. Это может быть связано с тем, что представления отображаются из разных коллекций. Я попытаюсь расширить коллекцию ItemList и переопределить метод parse(). Любая помощь приветствуется.

Ответы

Ответ 1

Пол Йодер из Backbone.js google group предоставил решение. Вы можете просмотреть его здесь

Ответ 2

@machineghost находится прямо на; Модели полностью отделены от представлений, поэтому вы можете сделать так, чтобы многие представления были прикреплены к той же модели, что и вам. Вы также можете расширить представление, если у них есть логика или атрибуты, которые вы хотели бы поделиться. Когда я использую Backbone, я часто обнаруживаю, что расширяю родительский вид, чтобы переопределить функцию render или предоставить другой шаблон.

Первый вид

ShoppingCartView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

Второй независимый вид

CheckoutView = Backbone.View.extend({
  model: ShoppingCart
  ...
});

Второй вид открывается первым

CheckoutView = ShoppingCartView.extend({ 
  template: a_different_template // syntax depends on your templating framework
  ... 
});

Ответ 3

Я новичок в Backbone.js, поэтому возьмите этот ответ с солью, но я думаю... вы просто сделаете второй взгляд. Весь смысл де-связи моделей и представлений заключается в том, чтобы сделать так, чтобы вам не нужно было ничего делать с моделями, если все, что вы хотите сделать, это сделать что-то другое с вашими представлениями.

Итак, я думаю, вам просто нужно создать YourView2, сказать ему использовать ту же модель, что и YourView1, и вы должны быть в бизнесе.

Ответ 4

После небольшого исследования я нашел метод Collection.Parse, который кажется правильным местом для преобразования ответа после операции fetch(). Похоже, мне понадобится новая модель набора, коллекция и просмотр объектов. Вот как я реализовал функцию синтаксического анализа в моем объекте коллекции. Успешно протестирован в Chrome. Не стесняйтесь предлагать улучшения

    <snip>
    parse: function(response) {

        var items = response; //the raw item model returned from localStorage  
        var tagNameItemCount = [];
        var selectedTags = ["Tag1", "Tag2", "Tag3"];
        for(i = 0; i < selectedTags.length; i++){
            var currentTagName = selectedTags[i];
            var currentItemCount = this.getItemsCountByTagName(currentTagName, items);
            tagNameItemCount.push({tagName: currentTagName, tagCount: currentItemCount});
        }

        return tagNameItemCount;



       },
getItemsCountByTagName: function (tagName, items) {
                        var taggedItems = _.filter(items, function(item){ return _.include(item.tags, tagName); });
                        return taggedItems.length;
                       },

     </snip>