Backbone.js如何将View连接到Model

Question

我试图通过以下示例学习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);

Answer 1

该模型通常作为构造函数参数传递给View.

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

其他参数也可以传递,请查看http://backbonejs.org/#View上的文档.

Answer 2

Backbone实现MVC架构的方式,可以将视图附加到数据集(集合)以及单个模型实例.模型通常表示从数据库检索的记录,但在自定义实现中可以是任何数据对象.

如您所见,这是一个非常明显的问题,当您实际拥有一个代表整个数据集的视图时,为什么要通过嵌套视图创建它们,每个视图都代表一个模型实例.没有必要以这种方式做事.您可以拥有一个非嵌套视图,该视图表示整个数据集,当集合中的任何项目发生更改时,该数据集会自动更新.

但是现在,想想......仅仅因为集合中的一个单一实体发生了变化,重新渲染整个视图才真正有意义.假设您有一个由数据网格视图表示的数千条记录的集合.你不认为重新渲染整个数据网格与集合中的每个更改将增加应用程序的延迟.

因此,在许多情况下,以示例实现的方式使用嵌套视图对象是更优选的选项.因此,当单个模型实例更改时,必须重新呈现相应的视图,而不是整个复合视图.

此外,如果要为用户提供操作数据集以及单个元素的UI元素,以这种嵌套视图方式实现更方便,更明智,您可以在其中提供用于操作数据集的UI控件.复合视图级别和元素视图级别的各个数据元素的控件.

希望澄清你的问题.

Answer 3

这将创建ListView的新实例并添加model属性.现在您与模型有关系,可以使用"this.model".

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

另见这里