javascript - Backbone.js:获取模型集合并渲染它们

Question

我正在学习使用 Backbone.js 进行 JavaScript MVC 应用程序开发，并且在 View 中呈现模型集合时遇到问题。这是我想要做的:

• 页面加载完成后，从服务器获取数据作为模型集合

• 在 View 中渲染它们

这就是我想要做的，这是我目前所拥有的:

$(function(){

    "use strict";

    var PostModel = Backbone.Model.extend({});

    var PostCollection = Backbone.Collection.extend({
        model: PostModel,
        url: 'post_action.php'
    });

    var PostView = Backbone.View.extend({
        el: "#posts-editor",        

        initialize: function(){
            this.template = _.template($("#ptpl").html());
            this.collection.fetch({data:{fetch:true, type:"post", page:1}});
            this.collection.bind('reset', this.render, this);
        },

        render: function(){
            var renderedContent = this.collection.toJSON();
            console.log(renderedContent);
            $(this.el).html(renderedContent);
            return this;
        }
    });

    var postList = new PostCollection();
    postList.reset();
    var postView = new PostView({
        collection: postList
    });

});

问题

据我所知，Chrome 正在记录来自服务器的响应，它是我想要的 JSON 格式。但它在我看来并没有呈现。控制台中没有明显的错误。

服务器有一个处理程序，它接受 GET 参数并回显一些 JSON:http://localhost/blog/post_action.php?fetch=true&type=post&page=1

[
   {
      "username":"admin",
      "id":"2",
      "title":"Second",
      "commentable":"0",
      "body":"This is the second post."
   },
   {
      "username":"admin",
      "id":"1",
      "title":"Welcome!",
      "commentable":"1",
      "body":"Hello there! welcome to my blog."
   }
]

Answer 1

您的代码有 2 个潜在问题。

1. 事件监听器回调应该在 调用 collection.fetch() 之前注册。否则，您可能会错过第一个 reset 事件，因为它可能会在监听器注册之前触发。

2. reset 事件不足以确保每次更新集合时 View 都会重新呈现。

另请注意，使用 object.listenTo() 表单绑定(bind)事件是一种很好的做法，因为它可以确保在关闭 View 时正确注销。否则，您可能会得到所谓的 Backbone zombies。 .这是一个解决方案。

this.listenTo( this.collection, 'reset add change remove', this.render, this );
this.collection.fetch({ data: { fetch:true, type:"post", page:1 } });

请注意如何通过用空格分隔同一对象来注册多个事件。