Reputation: 519
I am new to backbonejs I am able to add and show the contacts from database . but i am unable to execute a delete using backbonejs. JSFiddle http://jsfiddle.net/L183kw0o/10/ When i try to delete it gives me the error
"Uncaught ReferenceError: Id is not defined "
Below is the stacktrace (anonymous function) VM103:2 InjectedScript._evaluateOn VM69:730 InjectedScript._evaluateAndWrap VM69:669 InjectedScript.evaluate VM69:581
This is My Model
var modelContact = Backbone.Model.extend({
defaults: function () {
return {
Id: 0,
Name: "",
Address: ""
};
},
idAttribute: "Id",
url: function(){
return 'api/Contact/' + this.get("Id");
},
initialize: function () {
if (!this.get("Id")) {
this.set({ "Id": this.defaults().Id });
}
},
clear: function() {
console.log(this.get("Id"));
this.destroy({
error: function(model, response) {
alert("error");
},
success: function(model, response) {
alert("success");
console.log(response);
}
});
}
});
Model Collection
var contactCollection = Backbone.Collection.extend({
model: modelContact,
url: function() {
return 'api/Contact';
}
});
var contacts = new contactCollection;
View
var contactView = Backbone.View.extend({
tagName: "tr",
events: {
"click a.destroy": "clear"
},
template: _.template($("#newContacttemplate").html()),
initialize: function() {
this.model.on("change", this.render, this);
this.model.on('destroy', this.remove, this);
},
render: function () {
if (this.isGoingToBeRemoved) {
return (this);
}
this.$el.html(this.template(this.model.toJSON()));
return this;
},
clear: function (e) {
this.isGoingToBeRemoved = true;
this.model.clear();
}
});
All errors are resolved this is the working code
Upvotes: 0
Views: 1507
Reputation: 188
The problem come from "render".
Indeed, You are setting a value and you erase your model :
clears: function (e) {
console.log(e);
console.log(this.model);
this.model.set({ // trigger change
Id: 3
});
this.model.get("Id");
this.model.clear(); // remove your model
}
Because, JS is asynchronous, you will have "render" and "clear" called in same time. And when you will call this.$el.html(this.template(this.model.toJSON()));
the model.get('Id') will be already removed.. So, you will try to call something that doesn't exist
render: function () {
// console.log(this.model.toJSON());
this.$el.html(this.template(this.model.toJSON())); // this.model.toJSON() == {}
return this;
},
You have to prevent the render method when you "clear" your model.
Upvotes: 1