4

我有两个简单的视图，一个带有一个创建视图并将其附加到页面的按钮。新视图由一个带有链接的列表项和一个我需要绑定到每个列表项的事件组成。我认为这里的问题是 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

Backbone 自动将事件委托给视图元素。照原样，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);
    }
});

和更新的小提琴http://jsfiddle.net/BLP6J/31/

于 2012-12-16T11:54:07.653 回答