如何使用主幹渲染集合？

我有這個工作正常的骨幹，我只是想渲染集合被抓取！如何使用主幹渲染集合？

代碼：

var SearchView = Backbone.View.extend({ 
     events: { 
      "keyup": "handleChange" 
     }, 
     initialize: function(){ 
      this.collection.bind("reset", this.updateView, this); 
     }, 
     render: function(){ 
      // this is where i need help 
      this.$el.next('#suggestions').append(// iterate over this.collection and apppend here) // 

     }, 
     handleChange: function(){ 
      var term = this.$el.val(); 
      this.collection.search(term); 
     }, 

     updateView: function() { 

      this.render(); 
     } 

    });

我只是想遍歷this.collection並顯示「文本」屬性，這就是每個集合內，其追加到（「#suggestions」）EL。感謝

來源

2012-08-17 user1551482

專注於你的重置，呈現了收藏的問題，這是我會怎麼做。這種方式假定當你創建你的視圖時，$ el已經存在，並且你通過View構造函數傳遞它，所以它已經準備好了。

var SearchView = Backbone.View.extend({ 
     template: _.template('<span><%= term %></span>'); 
     initialize: function(){ 
      this.collection.bind("reset", this.render, this); 
     }, 
     render: function(){ 
      this.addAllTerms(); 
      return this; 
     }, 
     addAllTerms: function() { 
      var self = this; 
      this.collection.each(function(model) { 
       self.addTerm(model); 
      }); 
     }, 
     addTerm: function(someModel) { 
      this.$el.next('#suggestions').append(this.template(someModel.toJSON())); 
     } 
    });

這與您的方法在幾個方面有點不同。首先，我們利用Underscore的模板功能。這可能是從span到li到div的任何東西。我們使用<％=％>來表示我們要插入一些值（它將來自我們的model.term屬性）。

而不是去處理程序然後渲染，我只是綁定集合呈現。

render()假設我們總是要刷新整個事情，從頭開始構建。 addAllTerms()只需循環收集。您可以使用forEach()或只是each()這是除了forEach()是一樣的東西是3個字符太懶了我的懶惰流氓。 ;-)

最後，addTerm()函數採用一個模型並將其用於它將附加到#suggestions的值。基本上，我們說「用插值附加模板」。我們將上面的模板函數定義爲此View對象屬性，以清楚地將模板與數據分開。雖然你可以跳過這部分，但只是append('<span>' + someModel.get('term') + '</span>')或什麼不是。 _.template（）使用我們的模板，並且還使用與我們模板中的屬性對齊的屬性的任何類型的對象。在這種情況下，'期限'。

這只是一個不同的方式來做你正在做的事情。我認爲這段代碼更易於管理。例如，也許你想添加一個新術語而不刷新整個集合。 addTerm()函數可以獨立運行。

編輯：

並不重要，但有些事我的模板使用，我發現有用的，我沒有看到它，當我第一次開始了。當你傳遞model.toJSON()到模板功能，我們基本上是通過所有的模型屬性中所以，如果該模型是這樣的：

defaults: { 
    term: 'someTerm', 
    timestamp: '12345' 
}

在我們前面的例子中，該屬性時間戳也傳遞不使用，只使用<%= term %>。但是我們也可以通過將它添加到模板中來輕鬆插入它。我想知道的是，您不必限制自己從一個模型中獲取數據。一個複雜的模板可能有幾個模型的數據。

我不知道這是最好的方式，但我做的是有這樣的事情：

makeHash: function() { 
    var hash = {}; 
    hash.term = this.model.get('term'); 
    hash.category = anotherModel.get('category'); 

    var date = new Date(); 
    hash.dateAccessed = date.getTime(); 

    return hash; 
}

所以，你可以輕鬆地構建自己的自定義哈希扔成模板，聚集所有的您想要將數據插入到要傳遞到模板中的單個對象中。

// Instead of .toJSON() we just pass in the `makeHash()` function that returns 
// a customized data object 

this.$el.next('#suggestions').append(this.template(this.makeHash()));

您還可以輕鬆地傳入整個對象。

makeHash: function() { 
    var hash = {}; 
    hash.term = this.model.get('term'); 

    var animal = { 
     name: 'aardvark', 
     numLegs: 4 
    }; 

    hash.animal = animal; 

    return hash; 
}

並通入我們的模板看起來像這樣的：

template: _.template('<span><%= term %></span> 
    <span><%= animal.name %></span> 
    <span><%= animal.numLegs %></span>')

我不知道這是否是最好的方式，但它讓我瞭解到什麼數據進入我的模板。也許很明顯，但當我剛開始時，這不適合我。

來源

2012-08-17 17:59:17 jmk2142

我找到了解決問題的辦法，我也會把它放在這裏，可能想知道的人：

render: function(){ 
      this.collection.forEach(function(item){ 
       alert(item.get("text")); 
      }); 
     }

來源

2012-08-17 17:47:37 user1551482

如何使用主幹渲染集合？

回答

相關問題