2012-09-03 108 views
0

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

這是當前版本,我想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. 它不是骨幹真的是視圖,渲染它..

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

乾杯,

理查德

回答

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; 
         } 
        }); 
    
+0

,如果你想你可以有這個簡單的例子:http://jsfiddle.net/ambiguous/fHUcu/你說差不多就是我正要說。 –

+0

非常感謝你。我很欣賞我的問題,這個問題有點新鮮,所以我對這樣的詳細答案非常感激。 –