Backbone.js - Collection within Model - Object function (a){return new n(a)} has no method 'has'

Question

I am getting an

Object function (a){return new n(a)} has no method 'has'

error on calling the fetch() method on my model. Heres the code:

var Exercise = Backbone.Model.extend({
    defaults: {
        idAttribute: 'e_id',
        e_id: "-1",
        exerciseName: "Exercise",
        exerciseDescription: "Address",
        exerciseURL: "vimeo.com",
        reps: "0",
        sequence: "0"
    },
    initialize: function() {
        alert("Exercise!");
    }
});

var ExerciseList = Backbone.Collection.extend({
    url: "/getWorkoutList.php",
    model: Exercise,
    initialize: function() { }
});

var Workout = Backbone.Model.extend({
    urlRoot: "/getWorkoutList.php",
    url: function() {
        return this.urlRoot + "?workoutID=" + this.get('workoutId');
    },
    defaults: {
        idAttribute: 'workoutId',
        workoutId: "-1",
        workoutName: "WorkoutName",
        workoutDescription: "WorkoutDescription",
        exercises: new ExerciseList()
    }, 
    initialize: function() {
        _.bindAll(this); 
        directory.renderWorkout(this);
    },
    parse: function(response) {
        return response;
    }
});

var WorkoutList = Backbone.Collection.extend({
    url: "/getWorkoutList.php",
    model: Workout,
    initialize: function() {
        _.bindAll(this); 
    },
    parse: function(response) {
        return response;
    }
});

var WorkoutView = Backbone.View.extend({
    tagName: "div",
    className: "workout-container",
    template: $("#tmp-workout").html(),
    initialize: function() {
        _.bindAll(this); 
        this.model.bind('change', this.render, this);
    },
    render: function(){
        console.log("WorkoutView");
        var tmpl = _.template(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    },
    //add ui events
    events: {
        "click #workout-details": "getWorkoutDetails"
    },

    getWorkoutDetails: function (e) {
        e.preventDefault();
        this.model.fetch();
    }
});

var ExerciseView = Backbone.View.extend({
    tagName: "exercise",
    className: "exercise-container",
    template: $("#tmp-exercise").html(),
    initialize: function() {
        _.bindAll(this); 
        alert("ExerciseView");
    },
    render: function(){
        console.log("render exercise view");
        var tmpl = _.template(this.template);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});

var WorkoutListingView = Backbone.View.extend({
    el: $("#workouts"),
    initialize: function() {
        var collection = new WorkoutList();
        collection.fetch();
    },
    render: function() {
        var that = this;
        _.each(this.collection.models, function(item){
            that.renderWorkout(item);
        });
    },
    renderWorkout: function(item) {
        var workoutView = new WorkoutView({
            model:item
        });
        this.$el.append(workoutView.render().el);
        var that = this;
        _.each(workoutView.model.get('exercises').models, function(exercise) {
            that.renderExercise(exercise);
        });
    },
    renderExercise: function(item) {
        var exerciseView = new ExerciseView({
            model:item
        });
        this.$el.append(exerciseView.render().el);
    }
});

Everything works fine when I am retrieving the Workout Collection the fist time. However, when I call getWorkoutDetails, I get the error. By inserting alerts and console.logs in parse() of Workout Model, I've found out that it does get the correct response from server, but for some reason, its giving this error.

Any ideas? Thanks.

try with this _(this).bindAll(); this.render = _.bind(this.render, this); this.render(); this.model.bind('change:value', this.render); — vaske, Feb 14 '13 at 09:22
Thanks for the answer. I cannot figure out where do you want me to put me to put this piece of code: _(this).bindAll(); this.render = _.bind(this.render, this); this.render(); Do you want me to put it in the initialize() of WorkoutView? — user1151659, Feb 14 '13 at 09:32
No problem :) But still the same problem. And WorkoutView's render function didnt get called either. — user1151659, Feb 14 '13 at 09:40

score 0 · Accepted Answer · answered Feb 14 '13 at 11:37

OK, after spending a lot of time in the beautiful world of minified javascript spaghetti, I found out that the underscore.js version I was using didnt had the function 'has' in it. Updating underscore.js from 1.2.2 to 1.4.4 solved the problem. Also, my backbone.js version is 0.9.1

Backbone.js - Collection within Model - Object function (a){return new n(a)} has no method 'has'

1 Answers1