2013-08-01 171 views
2

我有一個已經充滿模型的集合,我需要用一個模型更新這個集合並在頁面上顯示它(模型)。所以,下面的文檔,我的觀點得到模型從服務器:骨幹抓取然後渲染模型

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

+0

請將您的看法發佈到您使用此係列的地方! – nemesv

回答

2

我認爲你的問題是你的視圖只訂閱集合的「重置」事件,當你使用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還沒有。

+0

您可能還想要在渲染時清除已呈現的項目,或僅渲染對集合而言新的項目。否則,你可能會得到相同的物品得到反覆渲染。 – David

+0

0.9.2版本的優點。 – cgTag

+0

@David將你的兩行放到初始化和渲染方法中,但仍然不起作用 – alexvassel

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運行該函數。

+0

listenTo不能與'未捕獲的類型錯誤:對象[對象對象]沒有方法'偵聽''錯誤 – alexvassel

+0

嘗試添加行到初始化函數。 – David

+0

@alexvassel可能是一個版本問題。你有使用舊版本的原因嗎? – cgTag