【发布时间】：2013-11-22 20:38:54
【问题描述】：
我有这个简单的 BackboneJs 应用程序。我正在使用 Slim 框架和 NotORM。 我的问题是，当我添加新的“任务”（视图）时，元素被添加到 DOM，数据被添加到数据库中。但是，在我想单击删除（izbrisi）时添加视图后，它会立即将其从 DOM 中删除，但不会从数据库中删除。 （不发送删除请求）。刷新页面后，点击删除按钮 (izbrisi) 一切正常。
(function(){
window.App = {
Models:{},
Collections: {},
Views : {}
}
window.template = function(id) {
return _.template( jQuery('#' + id).html());
}
App.Models.Parti = Backbone.Model.extend({
defaults: {
},
initialize:function()
{
},
urlRoot: 'http://localhost/BackboneJS/vjezba6/server/index.php/task'
});
App.Collections.Partiji = Backbone.Collection.extend({
model: App.Models.Parti,
url: 'http://localhost/BackboneJS/vjezba6/server/index.php/task',
});
App.Views.Parti = Backbone.View.extend({
tagName :"div",
className: "box shadow aktivan",
template: template("boxovi"),
initialize: function() {
//this.model.on('change', this.render, this);
this.model.on('destroy', this.ukloni, this);
},
events: {
'click #izbrisi': 'izbrisiItem',
},
izbrisiItem: function()
{
this.model.destroy();
},
ukloni:function()
{
this.$el.remove();
console.log("frag");
},
render: function() {
var template = this.template( this.model.toJSON() );
this.$el.html(template);
return this;
}
});
App.Views.Partiji = Backbone.View.extend({
tagName:"div",
id: "nosac-boxova",
initialize: function() {
this.collection.on('add', this.dodajPartyView, this);
},
render: function() {
this.collection.each(this.dodajPartyView, this);
return this;
},
dodajPartyView: function(party) {
var partyView = new App.Views.Parti({ model: party });
this.$el.append(partyView.render().el);
}
});
App.Views.Dodaj = Backbone.View.extend({
tagName: "div",
id: "dodajParty",
template: template("dodajTemp"),
events:{
"submit": "submit"
},
submit: function(e)
{
e.preventDefault();
var inpNaziv = $(e.currentTarget).find('.naziv').val();
//var inpLokal = $(e.currentTarget).find('.lokal').val();
//var inpDatum = $(e.currentTarget).find('.datum').val();
var inpOpis = $(e.currentTarget).find('.opis').val();
var party = new App.Models.Parti
({
naziv: inpNaziv,
//lokal : inpLokal,
//datum : inpDatum,
tekst: inpOpis
});
// this.collection.add(party);
this.collection.create(party);
},
render: function() {
var template = this.template();
this.$el.html(template);
return this;
}
});
var kolekcijaPartija = new App.Collections.Partiji;
kolekcijaPartija.fetch();
var dodajView = new App.Views.Dodaj({collection:kolekcijaPartija});
$("div#sidebar-right").prepend(dodajView.render().el);
var partijiView = new App.Views.Partiji({collection: kolekcijaPartija});
$("div#content").prepend(partijiView.render().el);
})();
编辑 1
App.Views.Partiji = Backbone.View.extend({
tagName:"div",
id: "nosac-boxova",
initialize: function() {
//this.collection.on('add', this.dodajParty, this);
//this.collection.on('reset', this.dodajPartyView, this);
},
render: function() {
//this.collection.each(this.dodajParty, this);
console.log(this.collection.length);
//return this;
},
dodajParty: function(party) {
var partyView = new App.Views.Parti({ model: party });
this.$el.append(partyView.render().el);
}
});
返回 0
【问题讨论】：
-
hm...页面上有多少#izbrisi 元素？ ID 在 DOM 中必须是唯一的。
-
我想我知道发生了什么。在您的 prepend() 方法中，使用 view.render().$el.html() 而不是 .el 并重试。
-
不，这不是解决方案，但感谢您的帮助
-
删除链接的事件在哪里？
-
当您最初添加模型时，听起来您没有从服务器向模型返回
id属性。如果在模型上调用destroy时没有id属性，Backbone 甚至不会费心向服务器发送DELETE请求。
标签： backbone.js slim destroy notorm