javascript Backbone.js：获取模型集合并渲染它们
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17604374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone.js: Fetch a collection of models and render them
提问by hyde
I am learning JavaScript MVC application development using Backbone.js, and having issues rendering model collection in the view. Here's what I want to do:
我正在使用 Backbone.js 学习 JavaScript MVC 应用程序开发，并且在视图中呈现模型集合时遇到问题。这是我想要做的：
After the page finishes loading, retrieves data from the server as model collection
Render them in the view
页面加载完成后，从服务器检索数据作为模型集合
在视图中渲染它们
That's all I want to do and here is what I have so far:
这就是我想要做的，这是我目前所拥有的：
$(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
});
});
Problem
问题
As far as I know, Chrome is logging the response from the server and it's in JSON format like I want it. But it does not render in my view. There are no apparent errors in the console.
据我所知，Chrome 正在记录来自服务器的响应，它是我想要的 JSON 格式。但在我看来，它并没有呈现。控制台中没有明显错误。
The server has a handler that accepts GET parameters and echos some JSON:
http://localhost/blog/post_action.php?fetch=true&type=post&page=1
服务器有一个接受 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."
}
]
采纳答案by mor
There are 2 potential problems with your code.
您的代码有 2 个潜在问题。
The event listener callback should be registered beforecalling the
collection.fetch(). Otherwise, you might miss the firstresetevent as it might be triggered before the listener is registered.The
resetevent is not enough to ensure that the view will re-render every time the collection gets updated.
应在调用
collection.fetch(). 否则，您可能会错过第一个reset事件，因为它可能在注册侦听器之前被触发。该
reset事件不足以确保每次更新集合时都会重新呈现视图。
Also, note that it is a good practice to use the object.listenTo()form to bind events as it will ensure proper unregistration when the view is closed. Otherwise, you may end up with what is known as Backbone zombies. Here is a solution.
另请注意，使用object.listenTo()表单绑定事件是一种很好的做法，因为它可以确保在视图关闭时正确取消注册。否则，您最终可能会遇到所谓的骨干僵尸。这是一个解决方案。
this.listenTo( this.collection, 'reset add change remove', this.render, this );
this.collection.fetch({ data: { fetch:true, type:"post", page:1 } });
Note how you can register multiple events from the same object by separating them with whitespace.
请注意如何通过用空格分隔来注册来自同一对象的多个事件。
回答by Artem Volkhin
change
改变
this.collection.bind('reset', this.render, this);
to
到
this.collection.bind('sync', this.render, this);
The problem is you perform reset only once, in the beginning. And at that time you don't have anything to render. The next time, when you fetch your collection, reset event doesn't fire, because you fetch collection without option {reset: true}.
问题是您一开始只执行一次重置。那时你没有任何东西可以渲染。下一次，当您获取集合时，重置事件不会触发，因为您获取集合时没有选项 {reset: true}。
回答by Sushanth --
Change this line
改变这一行
this.collection.bind('reset', this.render, this);
to
到
this.listenTo(this.collection, 'reset', this.render);
回答by Rogier
When fetching your collection, the reset event is not fired by default anymore. (I believe since version 1.0) In order to have Backbone fire the reset event when the collection has been fetched, you now have to call the fetch method like so:
获取您的集合时，默认情况下不再触发重置事件。（我相信从 1.0 版开始）为了在获取集合时让 Backbone 触发重置事件，您现在必须像这样调用 fetch 方法：
this.collection.fetch({reset: true});
