集合中的骨幹視圖

Question

我對骨幹網非常陌生，需要使用它來創建列表項。每個列表項都有一個模型和一個視圖。因爲它是一個列表，它似乎是一個集合的理想解決方案，但我努力使用它們。

這是當前版本，我想chaneg使用集合：

// The Model & view 
var IntroModel = Backbone.Model.extend({}); 
var Introview = Backbone.View.extend({ 
    template: _.template($('#taglist-intro').text()), 
    render: function() { 
     console.log(this.model.attributes); 
     this.$el.append(this.template(this.model.attributes)); 
    } 
}); 

// We will store views in here 
// Ideally this would be a collection 
views = []; 

// Get the data for that collection 
$.getJSON(url, function(json) { 

    _.each(json, function(item) { 

     // Create each model & view, store views in the views array 
     var model = new IntroModel(item); 
     var view = new Introview({ 
     model : model 
     }) 
     views.push(view); 

    }) 

}) 

// I can render a view like this 
// But I'd rather it rendered the view when I add items to the collection 
views[0].render() 

所以我有什麼作品，但它不是一個真正做起來「的骨幹道路」。這似乎有點毫無意義，因爲：

1. 這將是更好地使用一個集合，而不是一個數組
2. 這將是更好的，當項目被添加到陣列
3. 它不是骨幹真的是視圖，渲染它..

感激任何指針，如果你不能提供具體的代碼示例我還是很感激的鏈接&資源涵蓋這個問題。

乾杯，

理查德

Answer 1

您的權利，目前的實現是不是主幹道路。你正在做的大多數事情都是由骨幹中的集合對象直接處理的。在骨幹集合中，基本上只是一個附加有附加方法的數組。這些方法賦予了收藏他們的力量。骨幹網擁有多項功能，包括：

• 「url」屬性：使用此屬性，當您運行的獲取方法收集將自動填充本身（例如myCollection.fetch（））。
• 您可以將函數綁定到集合的「重置」事件。當您填充集合時，會觸發此事件。通過調用集合的呈現事件，集合可以在集合更改時自動呈現相關視圖。還有其他收集事件（例如「添加」新模型等），您也可以附加功能。

• 我發現Backbone文檔是最好的開始。然而，一個簡單的例子總是有用的。下面的代碼顯示瞭如何定義一個簡單的集合，以及如何創建兩個視圖（一個視圖創建一個列表，另一個視圖呈現列表中的項目）。請注意集合中使用url屬性。 Backbone在運行fetch（）方法時使用它來檢索集合的內容（請參閱OrgListView對象）。還要注意視圖的render方法如何綁定到集合的'reset'事件，這可以確保在填充集合之後調用render事件（請參閱OrgsListView的初始化方法）。

   /** 
      * Model 
      */ 
      var Org = Backbone.Model.extend(); 
  
      /** 
      * Collection 
      */ 
      var Orgs = Backbone.Collection.extend({ 
       model: Org, 
       url: '/orgs.json' 
      }); 
  
      /** 
      * View - Single Item in List 
      */ 
      var OrgItemView = Backbone.View.extend({ 
       tagName: 'li', 
       initialize: function() { 
        _.bindAll(this, 'onClick', 'render'); 
        this.model = this.options.model; 
        // Create base URI component for links on this page. (e.g. '/#orgs/ORG_NAME') 
        this.baseUri = this.options.pageRootUri + '/' + encodeURIComponent(this.model.get('name')); 
        // Create array for tracking subviews. 
        /*var subViews = new Array();*/ 
       }, 
       events: { 
        'click a.test': 'onClick' 
       }, 
       onClick: function(event) { 
        // Prevent default event from firing. 
        event.preventDefault(); 
        if (typeof this.listContactsView === 'undefined') { 
         // Create collection of contacts. 
         var contacts = new ContactsByOrg({ url: '/orgs.json/' + encodeURIComponent(this.model.get('name')) }); 
         this.listContactsView = new ListContactsView({ collection: contacts, baseUri: this.baseUri }); 
         this.$el.append(this.listContactsView.render().el); 
        } 
        else { 
         // Close View. 
         this.listContactsView.close(); 
         // Destroy property this.listContactsView. 
         delete this.listContactsView; 
        } 
       }, 
       onClose: function() { 
  //  console.log('Closing OrgItemView'); 
       }, 
       render: function() { 
        // TODO: set proper value for href. Currently using a dummy placeholder 
        this.$el.html('<a class="test" href="' + this.baseUri + '">' + this.model.get('name') + '</a>'); 
        return this; 
       } 
      }); 
  
      /** 
      * View - List of organizations 
      */ 
      var OrgsListView = Backbone.View.extend({ 
       className: 'orgs-list', 
       initialize: function() { 
        console.log('OrgsListView'); 
        _.bindAll(this, 'render'); 
        this.pageRootUri = this.options.pageRootUri; 
        this.collection = this.options.collection; 
        // Bind render function to collection reset event. 
             this.collection.on('reset', this.render); 
        // Populate collection with values from server. 
        this.collection.fetch(); 
       }, 
       onClose: function() { 
        this.collection.off('reset', this.render); 
  //  console.log('Closing OrgsListView'); 
       }, 
       render: function() { 
        var self = this; 
        this.$el.html('<ul></ul>'); 
        this.collection.each(function(org, index) { 
         var orgItemView = new OrgItemView({ model: org, pageRootUri: self.pageRootUri }); 
         self.$('ul').append(orgItemView.render().el); 
        }); 
        return this; 
       } 
      });