2

我有一个已经装满模型的集合，我需要用一个模型更新这个集合并在页面上显示它（模型）。因此，按照文档，我从视图中的服务器获取模型：

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

但是这个新模型并没有出现在页面上，但是集合得到了新模型。我想必须触发集合的某些方法，但事实并非如此。

提前抱歉，Backbone的新手）

风景：

    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

4

2 回答 2

2

我认为您的问题是您的视图仅订阅 Collection 的“重置”事件，当您使用 add:true 选项调用 fetch 时不会触发该事件。在这种情况下，它只会触发一个“添加”事件，所以你也需要听它。我通常做的是我有

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

在我视图的初始化函数中，视图的渲染函数为集合的每个模型调用 add 函数。

PS：对于 Backbone 0.9.2，我认为你必须使用 .on(...) 因为 listenTo 还没有。

于 2013-08-01T12:35:41.080 回答
2

您需要在集合更改时进行渲染。我从来没有用过reset，所以我不确定它什么时候被解雇。

改变

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

至

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

尽量不要on(..)用于视图。否则，您必须在off(..)删除视图时调用。当你使用listenToView 时，它会在它被销毁时删除事件。

编辑：

this使用 Underscore.js 时不必声明本地引用。

改变：

    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.

于 2013-08-01T12:37:52.907 回答