CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
Alex K
Alex K

Reputation: 183

Learning Backbone.js - Cannot convert 'this.model' to object

i'm newbie, trying to learn Backbone.js, and i've got this error:

Cannot convert 'this.model' to object

I'm trying to build an easy architecture for audioplayer, but this error makes me mad! Don't understand why it happens, but browser console shows error in line this.model.bind("reset", this.render, this) of ListOfSongsView.

Here's my code:

$(function () {    
    var Player = Backbone.Model.extend({
        defaults:{
             //blablabla
        }
    });     
    var Playlist = Backbone.Collection.extend({ 
        model: Player
    });    
    var MyPlaylist = new Playlist([ 
        { 
            //blablabla
        }
//here comes more songs
    ]);     
    var ListOfSongsView = Backbone.View.extend({                    
        tagName: 'ul',
        id: "tracks",        
        initialize: function () {
            this.model.bind("reset", this.render, this);
            var self = this;
            this.model.bind("add", function (player) {
                $(self.el).append(new OneSongView({model:player}).render().el);
            });
        },       
        render: function (eventName) {
            _.each(this.model.models, function (player) {
                $(this.el).append(new OneSongView({model:player}).render().el);
            }, this);
            return this;
        }
    });      
    var OneSongView = Backbone.View.extend({     
        tagName: "li",
        calssName: "clearfix",   
        template:_.template($('#tpl-one-song').html()),      
        initialize: function () {
            this.model.bind("change", this.render, this);
        },       
        render: function (eventName) {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        }        
    });     
    var AppRouter = Backbone.Router.extend({    
        routes:{
            "": "list",
            "!/": "list"
        },      
        initialize: function () {
            $('#block').html(new ListOfSongsView().render().el);
        },          
        list: function () {
            this.playlist = new Playlist();
            this.ListOfSongsView = new ListOfSongsView({model:this.playlist});
            this.playlist = MyPlaylist;
            $('#block').html(new ListOfSongsView().render().el);
        }           
    });      
    var app = new AppRouter();
    Backbone.history.start();    
});

What i'm doing wrong? Please, help me, my head is already cracked :(

Upvotes: 0

Views: 632

Answers (1)

L. Sanna
L. Sanna

Reputation: 6552

initialize: function () {
        $('#block').html(new ListOfSongsView().render().el);
    }

This is called the moment you construct the AppRouter. You pass no model in argument of ListOfSongsView(), so this.model is undefined.

Then the initialize of the view is called:

 initialize: function () {
        this.model.bind("reset", this.render, this);
        var self = this;
        this.model.bind("add", function (player) {
            $(self.el).append(new OneSongView({model:player}).render().el);
        });
    },

this.model is undefined, so you can't call bind on it.

Upvotes: 0

Related Questions