Как Backbone.js подключается к модели

Я пытаюсь изучить backbone.js в следующем примере. Затем я застрял в точке

ItemView = Backbone.View.extend

почему вы можете использовать this.model.get? Я думал, что это относится к экземпляру ItemView, который будет создан. Тогда почему ItemView имеет свойство модели вообще?!!

    (function($){
      var Item = Backbone.Model.extend({
        defaults: {
          part1: 'hello',
          part2: 'world'
        }
      });

      var List = Backbone.Collection.extend({
        model: Item
      });


var ItemView = Backbone.View.extend({

        tagName: 'li', 
        initialize: function(){
          _.bindAll(this, 'render');
        },
        render: function(){
          $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
          return this;
        }
      });

      var ListView = Backbone.View.extend({
        el: $('body'), 
        events: {
          'click button#add': 'addItem'
        },
        initialize: function(){
          _.bindAll(this, 'render', 'addItem', 'appendItem'); 

          this.collection = new List();
          this.collection.bind('add', this.appendItem); 

          this.counter = 0;
          this.render();
        },
        render: function(){
          $(this.el).append("<button id='add'>Add list item</button>");
          $(this.el).append("<ul></ul>");
          _(this.collection.models).each(function(item){ 
            appendItem(item);
          }, this);
        },
        addItem: function(){
          this.counter++;
          var item = new Item();
          item.set({
            part2: item.get('part2') + this.counter
          });
          this.collection.add(item);
        },

        appendItem: function(item){
          var itemView = new ItemView({
            model: item
          });
          $('ul', this.el).append(itemView.render().el);
        }
      });

      var listView = new ListView();      
    })(jQuery);

Ответ 1

Способ Backbone реализует архитектуру MVC, представления могут быть привязаны к наборам данных (коллекции), а также к экземплярам отдельных моделей. Модели обычно представляют записи, полученные из базы данных, но в пользовательских реализациях могут быть любыми объектами данных.

Как вы видите, очень очевидный вопрос: когда у вас действительно есть представление, представляющее целый набор данных, почему его следует создавать путем вложения представлений, каждый из которых представляет экземпляр одной модели. Это не обязательно делать так. У вас может быть не-вложенное представление, представляющее весь набор данных, который обновляется, когда какой-либо элемент в коллекции изменяется.

Но теперь, подумайте... было бы действительно иметь смысл повторно отобразить весь вид только потому, что одна единственная сущность в коллекции изменилась. Предположим, у вас есть коллекция тысяч записей, которые представлены представлением datagrid. Разве вы не думаете, что повторная рендеринга всего datagrid при каждом изменении коллекции увеличит латентность приложения.

Таким образом, во многих случаях более предпочтительным вариантом является вложенный объект представления так, как ваш пример был реализован. Поэтому, когда экземпляр одной модели изменяется, соответствующее представление должно быть повторно отображено, а не весь составной вид.

Кроме того, если вы хотите предоставить пользователю элементы пользовательского интерфейса, которые работают с наборами данных, а также с отдельными элементами, более удобно и разумнее реализовать в этом вложенном виде, где вы будете предоставлять элементы управления пользовательского интерфейса для работы на наборов данных на уровне составного представления и элементов управления для отдельных элементов данных на уровне представления элемента.

Надеюсь, что уточнит ваш вопрос.

Ответ 2

Модель обычно передается в представление как аргумент конструктора, подобный этому.

var item = new Item();
var view = new ItemView({ model : item });

другие параметры также могут быть переданы, проверьте документы на http://backbonejs.org/#View.

Ответ 3

Это создает новый экземпляр ListView и добавляет свойство модели. Теперь вы имеете отношение к модели и можете использовать "this.model".

var view = new ListView({model: Item});

см. также здесь

Ответ 4

Модель означает один элемент в списке, коллекция - это весь список. Вы создаете listview для коллекции и itemview для элемента.

То, как вы задаете свой вопрос, немного странно, почему вы сбиваете с толку?

Ответ 5

Я думаю, что это происходит автоматически, потому что имя представления начинается с имени модели и содержимого слова View