我开始学习Backbone.js,我开始使用this boilerplate并通过从磁盘上的静态文件加载JSON数据并将其显示在html表中来作为示例。
然后我尝试在一个按钮上绑定一个事件,该按钮应该从集合中删除一个元素,然后从DOM中删除。事情很好,点击会触发destroy
方法,会在集合上触发remove
事件,但success
或error
的回调都不会出现destroy
1}}
有人有线索吗?
模特:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var memberModel = Backbone.Model.extend({
url: "/members.json",
defaults: {
email: "",
firstname: "",
lastname: "",
gender: "",
language: "",
consent: false,
guid: "",
creationDate: ""
},
initialize: function(){
}
});
return memberModel;
});
观点:
define([
'jquery',
'underscore',
'backbone',
'mustache',
'collections/members',
'text!templates/members/page.html'
], function($, _, Backbone, Mustache, membersCollection, membersPageTemplate){
var membersPage = Backbone.View.extend({
el: '.page',
initialize: function(){
this.members = new membersCollection();
this.members.on('remove', function(){
// works fine
$('.members-body tr').first().remove();
console.log('removed from collection');
});
},
render: function () {
var that = this;
this.members.fetch({success: function(){
var wrappedMembers = {"members" : that.members.toJSON()};
that.$el.html(Mustache.render(membersPageTemplate, wrappedMembers));
$('#delete-member').click(function(){
that.members.at(0).destroy({
// prints nothing!!!
success: function(){ console.log('sucess'); },
error: function(){ console.log('error'); }
});
});
}});
}
});
return membersPage;
});
答案 0 :(得分:7)
我同意这很奇怪。我不完全确定发生了什么,但这是我怀疑的......
您的Destroy()
来电未返回有效的JSON。
that
是什么。 骨干网有一点脱节(至少我起初对我而言)。在调用destroy()
或获取/保存时,该调用是异步的。通话结束后,立即触发删除事件,您的收藏可以响应。但是,在文档中深入挖掘一下,另一个事件就是对删除的确认:
和“同步”事件, 服务器成功确认模型删除后
因此,您的收藏是基于删除成功的假设。如果您希望收藏集响应已确认的删除,请查找sync
事件。
这留下了一个唠叨点 - 为什么你的错误处理程序不会被触发?好吧,回调旨在响应删除的确认。但我敢打赌,JS调用堆栈不知道如何解释它回来的响应,作为成功或错误。你可能偶然发现了AJAX的现实。我发现在backbone,jquery和其他一些框架中你可以混淆ajax错误处理。谷歌“未调用jquery ajax错误”,你会发现许多不同的场景,其中没有触发错误事件。
<强>更新强>
来回评论后......发生了两件事。首先,您的模型被视为“新”,这意味着对Destroy()
的调用不会产生服务器请求。因此,您的成功/错误不会触发。见this commit。
话虽如此,我认为你不认为你的模型是新的(没有坚持到服务器)。你需要做两件事之一。在模型映射中包含名为id
OR 的属性,您的模型ID(我假设为guid
)到模型的ID。通过将以下行应用于您的模型,可以轻松进行映射:idAttribute: "guid"
。您可以在idAttribute here上看到更多信息。