Alex Rivera | Logout

Backbone.js render().el Usage

Asked 2012-09-09T15:20:59.787
10

I've got this piece of code from a Backbone.js tutorial from here. The code is as follows:

(function($){

    var Item = Backbone.Model.extend({
        defaults: {
            part1: 'Hello',
            part2: 'World'
        }
    });

    var ItemList = Backbone.Collection.extend({
        model: Item
    });

    var ItemView = Backbone.View.extend({
        tagName: 'li',

        initialize: function(){
            _.bindAll(this, 'render');
        },

        render: function(){
            $(this.el).html("<span>" + this.model.get('part1') + " " + this.model.get('part2') + "</span>");
            return this;
        }

    });

    var AppView = Backbone.View.extend({
        el: $('body'),

        initialize: function(){
            _.bindAll(this, 'render', 'addItem', 'appendItem');

            this.collection = new ItemList();
            this.collection.bind('add', this.appendItem)
            this.counter = 0;
            this.render();
        },

        events: {
            'click button#add': 'addItem'
        },

        addItem: function(){
            var item = new Item();
            item.set({
                'part2': item.get('part2') + this.counter++
            });
            this.collection.add(item);
        },

        appendItem: function(item){
            var itemView = new ItemView({
                model: item
            });
            $('#list', this.el).append(itemView.render().el);
        },

        render: function(){
            $(this.el).append("<button id='add'>Add Item</button>");
            $(this.el).append("<ul id='list'></ul>")
        },
    });

    var Tasker = new AppView();

})(jQuery);

There is one thing I could not understand from the above code. In the function appendItem there is this piece of code:

itemView.render().
Edit
Report

1 Answer

12

The render() call returns the itemView itself. It then asks for the el instance variable (the element itself), which is then appended to the list view. In essence, the list view includes all the elements of the items rendered individually.

answered 2012-09-09T15:27:51.510

Your Answer