BackboneJS Uncaught ReferenceError: variable is not defined

Question

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

Can you create a JSFiddle and show us how you create your model ? — queval_j
– queval_j, Commented Oct 15, 2014 at 13:42
The whole purpose of the defaults is so you don't do what you're doing in the initialize method. You can drop that altogether — Maroshii
– Maroshii, Commented Oct 15, 2014 at 13:44
@Maroshii yes I am am Overriding it and calling the destroy on it. okay But I Do not think dropping the default will solve the issue. — Kinnan Nawaz
– Kinnan Nawaz, Commented Oct 15, 2014 at 13:44

queval_j · Accepted Answer · 2014-10-15 14:26:08Z

1

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.

edited Oct 15, 2014 at 14:26

answered Oct 15, 2014 at 14:21

queval_j

1882 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kinnan Nawaz Over a year ago

removed Kindly check this fiddle jsfiddle.net/ssgexu1y in the clears function i have removed all the code except this.model.clear();// But same error :(

Kinnan Nawaz Over a year ago

okay this fiddle has definitely removed the error but my changes are not posted back to the server. now i do not receive any error. but changes are not posted to the server.

queval_j Over a year ago

Do you have "this.destroy();" in your method "clear" ?

Kinnan Nawaz Over a year ago

yes i have in the model . it was not before clear: function() { this.destroy(); } dubuging y it is not going to the server

queval_j Over a year ago

Do you use the success and error options ? (backbonejs.org/#Model-destroy)

|

Collectives™ on Stack Overflow

BackboneJS Uncaught ReferenceError: variable is not defined

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related