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如何將視圖連接到模型

回答

相關問題