CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.js
Kinnan Nawaz
Kinnan Nawaz

Reputation: 519

BackboneJS Uncaught ReferenceError: variable is not defined

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

Answers (1)

queval_j
queval_j

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

Related Questions