4

2 つの単純なビューがあり、1 つにはビューを作成してページに追加するボタンがあります。新しいビューは、リンク付きの 1 つのリスト項目と、各リスト項目にバインドする必要があるイベントで構成されます。ここでの問題はelオブジェクトだと思います.elオブジェクトを読んでいるものは、ビューの構築時に定義されていないときに自動的に作成されるべきですか? このフィドルを参照してください

HTML:

<div id="main">
    <button type="button" class="add">Add view</button>
    <ul id="tasks" />
</div>

<script id="view-template-new-task" type="text/html">
    <li><a href="#" class="fire">Task</a></li>
</script>
​

JS:

var TaskView = Backbone.View.extend({
    events: {
        'click a.fire': 'fire'
    },
    fire: function() {
        alert('fire');
    },
    initialize: function() {
        this.template = _.template($('#view-template-new-task').html());
    },
    render: function() {
        $('#tasks').append(this.template());
    }        
});
var View = Backbone.View.extend({
    events: {
        'click button.add': 'addView'
    },
    addView: function(e) {
        var task = new TaskView();
        task.render();
    }
});
$(function() {
    var view = new View({
        el: $('#main')
    });
});​
4

1 に答える 1

5

バックボーンは、イベントをビュー要素に自動的に委任します。そのままでは、TaskView の el は、リスト内の要素ではなく、添付されていない div (Backbone によって作成されたデフォルトの el) を指します。

解決策は簡単です。tagName を li に設定し、この要素をメイン ビューに追加することで、el が正しい DOM ノードに設定されたサブビューを作成します。

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

    events: {
        'click a.fire': 'fire'
    },

    fire: function() {
        alert('fire');
    },

    initialize: function() {
        this.template = _.template($('#view-template-new-task').html());
    },

    render: function() {
        this.$el.html(this.template());
        return this;
    }        
});

var View = Backbone.View.extend({

    events: {
        'click button.add': 'addView'
    },

    addView: function(e) {
        var task = new TaskView();
        this.$('#tasks').append(task.render().el);
    }
});

更新された Fiddle http://jsfiddle.net/BLP6J/31/

于 2012-12-16T11:54:07.653 に答える