我有这个简单的BackboneJs应用程序。我正在使用Slim Framework和NotORM。 我的问题是,当我添加新的“任务”(View)时,元素被添加到DOM,数据被添加到数据库。但是,在我想要单击删除(izbrisi)后立即添加View后,它会从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
答案 0 :(得分:0)
你需要替换它:
this.model.on('destroy', this.ukloni, this);
有了这个:
this.model.on('remove', this.ukloni, this);
你的'事件'将它从DOM中删除,当Backbone检测到它将运行你的函数'ukloni'