我正在尝试从一个简单的JSON文件中填充一个集合,作为学习backbone.js的一部分。但我无法让它发挥作用。
进行了AJAX调用(使用FireBug验证),但toJSON
方法返回undefined
。
我做错了什么?
theModel = Backbone.Model.extend();
theCollection = Backbone.Collection.extend({
model: aModel,
url: "source.json"
});
theView = Backbone.View.extend({
el: $("#temp"),
initialize: function () {
this.collection = new theCollection();
this.collection.fetch();
this.render();
},
render : function () {
$(this.el).html( this.collection.toJSON() ); // Returns blank
}
});
var myView = new theView;
这是我的JSON:
[{
"description": "Lorem ipsum..."
},
{
"description": "Lorem ipsum..."
}]
答案 0 :(得分:10)
fetch
是异步的,如果您立即拨打render
,您的收藏品将不会被填充。要解决此问题,您只需将集合重置事件(Backbone> = 1.0的 sync 事件)绑定到视图渲染:
theView = Backbone.View.extend({
el: $("#temp"),
initialize: function () {
this.collection = new theCollection();
// for Backbone < 1.0
this.collection.on("reset", this.render, this);
// for Backbone >= 1.0
this.collection.on("sync", this.render, this);
this.collection.fetch();
},
render : function () {
console.log( this.collection.toJSON() );
}
});
注意bind方法的第三个参数,为方法提供正确的上下文: http://documentcloud.github.com/backbone/#FAQ-this
答案 1 :(得分:0)
我相信问题在于你的json
要么覆盖集合上的parse方法,要使用json
或者你可以改变json:)
[{
"description": "Lorem ipsum..."
},
{
"description": "Lorem ipsum..."
}]
我相信这就是你的json应该是什么样子,只是你的模型的一系列。