Backbone.js如何将视图连接到模型

我想通过以下示例了解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);

来源

2011-07-22 William Sham

Backbone实现MVC体系结构的方式，视图可以附加到数据集（集合）以及单个模型实例。模型通常表示从数据库检索到的记录，但在自定义实现中可能是任何数据对象。

正如你所看到的，当你真正拥有一个代表整个数据集的视图时，这是一个非常明显的问题，为什么它应该通过嵌套视图来创建，每个视图代表一个模型实例。这样做并不是必须的。您可以拥有一个非嵌套视图，该视图表示在集合中的任何项目发生更改时会自行更新的整个数据集。

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

因此，在许多情况下，您的示例已经实现嵌套视图对象的更优选选项。所以当一个模型实例改变时，相应的视图必须被重新渲染，而不是整个合成视图。另外，如果要为用户提供操作数据集以及单个元素的用户界面元素，以这种嵌套视图方式实现会更方便和更明智，您可以在其中提供用于操作的UI控件在复合视图级别的数据集上以及在元素视图级别的单个数据元素的控件。

希望澄清你的问题。

来源

2011-07-22 18:33:22 lorefnon

谢谢。这给了我清晰 –

-1

模型代表列表中的单个项目，集合是整个列表。您正在为该集合创建一个列表视图，以及该项目的项目视图。

你问你的问题的方式有点奇怪，为什么你会困惑？

来源

2011-07-22 01:13:04 Evert

开始我不知道了'this.model'在'ListVIew'从何而来。骨干怎么知道这个视图的模型是'Item'？ –

这将创建一个ListView的新实例并添加模型属性。现在你与模型有关系并且可以使用“this.model”。

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

Backbone.js如何将视图连接到模型

回答

相关问题