Question

I am very new to Backbone and am doing a simple tutorial. I keep running into an error that I dont understand. Here is my code.

(function($) {
    dataModel = new Backbone.Model.extend({
        data: [
        {text: "Google", href: "www.google.com"},
        {text: "Yahoo", href: "www.yahoo.com"},
        {text: "Youtube", href: "www.youtube.com"},
        ]
    });

var View = Backbone.View.extend({
    initialize: function(){
        this.template = $('#list-template').children();
    },
    el: $('#container'),
    events: {
        "click button": "render"
    },
    render: function(){
        var data = this.model.get('data');
        for(var i = 0, l = data.length; i < l; i++){
            var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end();
            this.el.find('ul').append(li);
        }
    }
});

var view = new View({ model: dataModel });
})(jQuery);

When I call this.model.get('data') I get the error TypeError: Object function (){return a.apply(this,arguments)} has no method 'get'. Please show me my error. Thanks.

Answer 1

All the properties and methods you pass when extending a model are set on its prototype not as its attributes, and dataModel here is not a Backbone model instance but a Backbone Model subclass. If done this way to access the data property you’d need to instantiate the model and do a modelInstance.data rather then modelInstance.get('data') as if it would be when data would be set as model attribute as shown in the example below.

What you wanted to do here was

var dataModel = new Backbone.Model({ // without the extend!
    data: [
    {text: "Google", href: "www.google.com"},
    {text: "Yahoo", href: "www.yahoo.com"},
    {text: "Youtube", href: "www.youtube.com"},
    ]
});

as you want to create an instance of a model rather then subclass Backbone.Model class. Extend method is used to subclass core Backbone classes – views, models, collections and routers.