Question

I’m learning Developing Backbone.js Applications By Addy Osmani and im stuck into the templates part.

Here is my template:

    <script type="text/template" id="item-template">
    <div class="view">
    <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
    <label><%= title %></label>
    <button class="destroy"></button>
    </div>
    <input class="edit" value="<%= title %>">
    </script>

Here is my backbone view:

var TodoView = Backbone.View.extend({
        tagName: 'li',
        className: 'todo_list',
        todoTpl: _.template($('#item-template').html()),
        events:{
            'dblclick label': 'edit',
            'keypress .edit':'updateOnEnter',
            'blur .edit':'closed'
            },
        render: function(){
            _.bindAll(this, 'edit','upadateOnEnter','close');
            this.$el.html(this.todoTpl(this.model.toJSON()));
            this.input = this.$('.edit');
            return this;
            },
        edit: function(){},
        updateOnEnter: function(){},
        closed: function(e){}
        });

        var todoView = new TodoView();
        console.log(todoView.el);

Im not sure what to expect the result but i was expecting the HTML’s inside the template of id item-template but i get only

<li class="todo_list"></li>

I think im wrong somewhere, i just couldnt figure it out.

Please help.

Answer 1

Backbone creates this.el automatically when the view is instantiated, but you need to call .render() to run the template and place it’s results inside of the element.

var todoView = new TodoView();
todoView.render();
console.log(todoView.el);

Update:

Also, your render function has a typo in it. You have upadateOnEnter when you should have updateOnEnter, and close should be closed.

_.bindAll(this, 'edit','updateOnEnter','closed');