Backbone.js 使用主干并尝试使用Parse.com中的数据填充我的集合
对这里来说是很新的。我试图在不复制和粘贴我遇到的教程中的代码的情况下重新创建ToDo示例。我还使用Parse.com作为我的后端。我一直在尝试使用主干视图填充我的集合中的待办事项。这是我的看法Backbone.js 使用主干并尝试使用Parse.com中的数据填充我的集合,backbone.js,collections,parse-platform,Backbone.js,Collections,Parse Platform,对这里来说是很新的。我试图在不复制和粘贴我遇到的教程中的代码的情况下重新创建ToDo示例。我还使用Parse.com作为我的后端。我一直在尝试使用主干视图填充我的集合中的待办事项。这是我的看法 app.ItemsView = Backbone.View.extend({ tagName: "section", initialize: function() { app.items = new app.ItemCollection; app.ite
app.ItemsView = Backbone.View.extend({
tagName: "section",
initialize: function() {
app.items = new app.ItemCollection;
app.items.query = new Parse.Query(app.Item);
app.items.fetch();
console.log(app.items.models.length);
var itemsInJSON = [];
app.items.models.forEach(function(item){
console.log("Item being pushed is " + item);
itemsInJSON.push(item.toJSON());
});
this.render(app.items);
},
render: function(items) {
items.each(this.addItem, this);
return this;
// $("#bucketList").html(itemsView.render().el);
},
addItem: function(item) {
var itemView = new app.ItemView ({model: item});
this.$el.append(itemView.render().el)
}
});
我已经在Parse.com上检查了我的应用程序,我可以看到我的数据库中保存了2个项目。我知道有问题,因为当我调用console.log(app.items.models.length)时代码>在初始化中,我得到的长度为0。但是当我加载页面后直接在Chrome开发工具控制台中键入app.items.models.length
时,我得到的长度是2
为什么我的initialize没有获取项目来填充我的集合?因为获取
实际上执行AJAX请求,所以它是异步的,您必须处理这个事实。它返回的对象如中所述,因此您的代码应该执行以下操作
app.items.fetch().then(function() {
console.log(app.items.models.length);
...
this.render();
}.bind(this));
这确保了依赖于AJAX请求结果的代码只能在该请求完成后执行
请注意,我使用.bind(this)
确保在jqXHR promise的回调中,我可以作为this
访问视图。这只适用于IE9+(请参阅),如果您需要支持IE8或更低版本,请使用下划线。在这种情况下,我建议您不要在promise中使用Jquery。
主干网在此情况下使用事件来管理/帮助
您应该做的第一件事是将模型/集合逻辑(fetch、set、get等)移动到模型/集合内部
然后,您可以在视图中看到类似的内容:
this.lintenTo(app.items, "sync", this.render);
这是处理这些情况的主要方法
但是为什么不使用承诺呢?
当您在视图中执行fetch()时,您已经破坏了SRP,因为如果将来出于某种原因,您需要更改fetch的调用方式,您需要触摸视图文件,但请记住fetch是一个模型/集合函数,在我看来,这意味着这种观点有不止一个原因需要改变。另外,当您在视图中执行fetch()并使用promissions时,您需要使用bind(this)来保留范围,在我看来,您可以避免将此代码传递给模型/集合,而只侦听视图中的事件。
对于任何模型/收集函数(fetch、save、destroy、set、get…)也是一样的。fetch
是异步的-它在console.log(…)
语句之前没有完成,但在控制台中检查时有。啊,好的。感谢您指出fetch()
是一个AJAX请求。现在知道了这一点,我决定通过一个成功选项使用回调函数,就像我对AJAX调用一样。我是否应该将收集逻辑移到我的收集构造函数@rcarvalho中的initialize选项中?不是所有逻辑,但在这种情况下,您只需要获取逻辑。我将在集合(或)模型内创建一个名为“fetchContent”的函数,然后执行fetch();我认为您应该进一步说明为什么使用承诺会破坏SRP,我很想听到更多关于它如何使编写单元测试变得更加复杂的信息。谢谢。我知道你从哪里来,但我不一定同意。有时视图中发生的某些事情会触发对服务器请求的需求,在这种情况下,我认为视图触发获取是可以的。我认为一个笼统的声明是错误的,但我同意在老年退休金计划用例中,这是一个很好的建议。不过,我在为使用承诺的代码编写测试时从未遇到过任何问题;)