1

我找到了一些 Backbone.js 代码的示例，然后我根据需要采用了这些代码。

在获取任何内容之前调用的render函数。CommentListView当有内容要渲染时，它似乎没有再次调用。

后端返回两个结果，所以这不是问题。

// Models
window.Comment = Backbone.Model.extend();

window.CommentCollection = Backbone.Collection.extend({
    model:Comment,
    url:"/api/comments/cosmopolitan"
});


// Views
window.CommentListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        console.log(this.model.models);
        _.each(this.model.models, function (comment) {
            console.log(comment);
            $(this.el).append(new CommentListItemView({model:comment}).render().el);
        }, this);
        return this;
    }

});

window.CommentListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-comment-list-item').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});

// Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list"
    },

    list:function () {
        this.commentList = new CommentCollection();
        this.commentListView = new CommentListView({model:this.commentList});
        this.commentList.fetch();

        $('#sidebar').html(this.commentListView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();
4

2 回答 2

4

的行为fetch在 Backbone 1.0.0 中有所改变。从变更日志：

  • 将 Collection 的“更新”重命名为set，用于与相似的并行性model.set()，并与reset进行对比。它现在是fetch之后的默认更新机制。如果您想继续使用“重置”，请通过{reset: true}.

并Collection#fetch说：

拿来 collection.fetch([options])

从服务器获取此集合的默认模型集，当它们到达时将它们设置在集合上。[...] 当模型数据从服务器返回时，它使用set来（智能地）合并获取的模型，除非你通过{reset: true},

你initialize只是绑定到"reset"：

this.model.bind("reset", this.render, this);

您可以绑定到将生成的"add"、"remove"和"change"事件，Collection#set也可以在以下情况下显式请求"reset"事件fetch：

this.commentList.fetch({ reset: true });

我在这里的时候还有一些其他的事情：

  1. 由于您的CommentListView视图使用的是集合而不是模型，因此您可能需要调用它collection：

    this.commentListView = new CommentListView({collection: this.commentList});

    然后参考this.collection里面的视图。有关View#initialize视图构造函数如何处理其参数的详细信息，请参阅。

  2. 集合混合了各种下划线方法，因此您可以说this.collection.each(function(model) { ... })而不是_.each(this.model.models, ...).
  3. 视图维护 jQuery 包装的缓存版本，el因此$el您可以说this.$el而不是$(this.el).
  4. 小心诸如console.log(this.model.models). 控制台通常会抓取实时引用，因此控制台中显示的将是this.model.models您查看时的状态，而不是console.log调用时的状态。console.log(this.model.toJSON())面对计时和 AJAX 问题时使用更可靠。
  5. 您可能想要切换到，listenTo而不是bind(AKA on)，因为它不太容易受到内存泄漏的影响。
于 2013-08-24T17:48:43.143 回答
0

通常用于为 fetch 创建一个监听器，当 fetch 完成并更改模型或集合时会有一个回调。试试这个：

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list"
    },

    list:function () {
        this.commentList = new CommentCollection();
        this.commentListView = new CommentListView({model:this.commentList});
        this.listenTo(this.commentList,'change', this.makeRender);
        this.commentList.fetch();


    },
    makeRender: function(){
        $('#sidebar').html(this.commentListView.render().el);
   }

});
于 2013-08-24T15:23:44.637 回答