骨干獲取然后渲染模型

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){}
        });
    }
});

PS版本0.9.2

Answer 1

我認為您的問題是您的視圖僅訂閱Collection的“重置”事件，當您使用add：true選項調用fetch時不會觸發該事件。 在這種情況下，它將僅觸發“添加”事件，因此您也需要收聽該事件。 我通常要做的是

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

在視圖的初始化函數中，視圖的render函數為集合的每個模型調用add函數。

PS：使用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(..)視圖on(..)使用on(..) 。 否則，在刪除視圖時，必須調用off(..) 。 當您使用listenTo ，View會在銷毀事件時負責刪除事件。

編輯：

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