Question

我正在学习Developing Backbone.js Applications由Addy Osmani和我加入模板部分。

这是我的模板：

    <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>

这是我的主干观点：

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);

我不确定该结果会发生什么，但我期待在id item-template模板中的HTML，但我只得到

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

我觉得我错了，我无法弄清楚。

请帮忙。

Answer 1

Backbone在实例化视图时自动创建this.el，但您需要调用.render()来运行模板并将其结果放在元素内。

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

更新

此外，您的渲染功能中也有拼写错误。如果您应upadateOnEnter，则updateOnEnter close应为closed。

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

骨干模板错误（不读取模板）

1 个答案: