CODEWITHSUNDEEP
javascriptjquerybackbone.js
Prometheus
Prometheus

Reputation: 33655

backbone is not displaying correctly

I'm just learning backbone.js. I have written the example below but it does not work, why?

It should just display the name in my div element.

(function($) {

    var Item = Backbone.Model.extend({
        urlRoot: '/api/camp/1/'
    });

    var ListView = Backbone.View.extend({

        el: '#reward_view',

        initialize: function() {
            _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here


        },

        render: function() {
            console.log(this)
            $(this.el).html('<h1>Hello' + this.model.get('name') + '</h1>');
            return this; // for chainable calls, like .render().el
        }

    });

    var reward_view = new ListView();

})(jQuery);

Upvotes: 0

Views: 43

Answers (1)

Rayweb_on
Rayweb_on

Reputation: 3727

You are missing the instanciation of your model, then you have to fetch that model and pass it to your view, after that you have to call render of your view.

(function($) {

var Item = Backbone.Model.extend({
    urlRoot: '/api/camp/1/'
});

var ListView = Backbone.View.extend({

    el: '#reward_view',

    initialize: function() {
        _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here


    },

    render: function() {
        console.log(this)
        $(this.el).html('<h1>Hello' + this.model.get('name') + '</h1>');
        return this; // for chainable calls, like .render().el
    }

});
var myItem = new Item();
myItem.fetch();
var reward_view = new ListView({model:myItem});
reward_view.render();

})(jQuery);

Upvotes: 3

Related Questions