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

this.elビューがインスタンス化されるとバックボーンが自動的に作成.render()されますが、テンプレートを実行してその結果を要素内に配置するために呼び出す必要があります。

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

アップデート：

また、レンダリング関数にタイプミスがあります。あるべき時、upadateOnEnterあるべき時があります。updateOnEntercloseclosed

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