0

我正在通过 Addy Osmani 学习开发 Backbone.js 应用程序，并且我陷入了模板部分。

这是我的模板：

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

我认为我在某个地方错了，我只是想不通。

请帮忙。

4

1 回答 1

0

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

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

更新：

此外，您的渲染函数中有错字。你upadateOnEnter应该有updateOnEnter，而且close应该有closed。

_.bindAll(this, 'edit','updateOnEnter','closed');
于 2013-01-18T07:43:19.063 回答