骨幹抓取然後渲染模型

Question

我有一個已經充滿模型的集合，我需要用一個模型更新這個集合並在頁面上顯示它（模型）。所以，下面的文檔，我的觀點得到模型從服務器：

this.collection.fetch(
{ 
    add: true, 
    data: FILTER + '&page=' + (CURRENT_PAGE + 1), 
    success: function(response){} 
}); 

但這種新模式沒有在網頁上顯示，而是收集得到新模式。我想這個集合的某些方法必須被解僱，但事實並非如此。

對不起提前，新手在主鏈）

的視圖：

var EcoNatureCardInListView = Backbone.View.extend({ 
    tagName: 'tr', 
    className: 'nature-card-tr', 
    template: $('#natureCardsListTR').html(), 
    render: function(){ 
     var tmpl = Handlebars.compile(this.template); 
     this.$el.html(tmpl(this.model.toJSON())); 
     return this; 
    } 
}); 
var EcoNatureCardsListView = Backbone.View.extend({ 
    el: $('#nature-cards-wrapper'), 
    events: { 
     "click a.short-eco-entity": "showFullEcoNatureCard", 
     "click #add-cards": "addCardsOnPage" 
    }, 
    initialize: function(){ 
     $("#nature-cards-list").html(""); 
     this.collection = new EcoNatureCardCollection(); 
     this.collection.fetch({ 
      success: function(response){} 
     }); 
     this.collection.on('reset', this.render, this); 
     this.collection.on('add', this.add, this); 
    }, 
    render: function(){ 
     var that = this; 
     _.each(this.collection.models, function(item){ 
      that.renderEcoNatureCard(item); 
     }, this); 
     $(addCards).show(); 
     $("#total-objects").text(TOTAL_OBJECTS); 
     $("#filtered-objects").text(FILTERED_OBJECTS); 
     if (this.collection.length < 20){ 
      $(addCards).hide(); 
     } 
    }, 
    renderEcoNatureCard: function(item){ 
     var ecoNatureCardInListView = new EcoNatureCardInListView({ 
      model: item 
     }); 
     $('#nature-cards-list').append(ecoNatureCardInListView.render().el); 
    }, 
    showFullEcoNatureCard: function(e){ 
     var _id = $(e.currentTarget).attr('value'); 
     var natureCard = ecoNatureCardsListView.collection.where({ _id: _id })[0]; 
     if (typeof(fullEcoNatureCardView) === 'undefined'){ 
      fullEcoNatureCardView = new FullEcoNatureCardView(natureCard); 
     } else { 
      fullEcoNatureCardView.initialize(natureCard); 
     } 
    }, 
    addCardsOnPage: function(){ 
     this.collection.fetch({ 
      add: true, 
      data: FILTER + '&page=' + (CURRENT_PAGE + 1), 
      success: function(response){} 
     }); 
    }, 
    filterDocs: function(FILTER){ 
     $("#nature-cards-list").html(""); 
     //$(loading).show(); 
     this.collection.fetch({ 
      data: FILTER, 
      success: function(response){} 
     }); 
    } 
}); 

P.S.版本0.9.2

Answer 1

我認爲你的問題是你的視圖只訂閱集合的「重置」事件，當你使用add：true選項調用提取時不會觸發這個事件。在這種情況下，它只會觸發一個「添加」事件，所以你也需要聽取它。 我一般做的是，我有

this.collection.on('reset', this.render, this); 
this.collection.on('add', this.renderEcoNatureCard, this); 

在我看來的初始化函數，視圖的渲染函數調用集合的每個模型的附加功能。

P.S .: with Backbone 0.9.2我認爲你必須使用.on（...），因爲listenTo還沒有。

Answer 2

您需要在集合更改時進行渲染。我從來沒有使用reset，所以我不知道什麼時候被解僱。

變化

this.collection.on('reset', this.render, this);` 

到

this.listenTo(this.collection,'add remove',this.render); 

儘量不要使用on(..)的意見。否則，您必須在刪除視圖時調用off(..)。當您使用listenTo時，視圖將負責移除事件被銷燬時的事件。

編輯：

您沒有使用Underscore.js時，本地引用申報this。

變化：

var that = this; 
    _.each(this.collection.models, function(item){ 
     that.renderEcoNatureCard(item); 
    }, this); 

要：

_.each(this.collection.models, function(item){ 
     this.renderEcoNatureCard(item); 
    }, this); 

當你的函數引用後，使用回調在Underscore.js的參數是context。這是函數將被執行的對象空間。您總是告訴它使用this運行該函數。