Question

我正在尝试使用Backbone.js并且相处得很好，但我遇到了问题。

假设我有一个根元素和一个子元素。

当文档加载时，我创建3个“根”实例。根实例附加标记。每个根实例都会创建一个子实例，在ul标记中创建

标记。

现在我希望子实例将事件和onclick事件附加到

标记。不幸的是，它不起作用。

我创造了一个小提琴：

var child = Backbone.View.extend({
    template: _.template('<li>Item '+count+'</li>'),
    events: {
        'click li': function() {
         alert('listitem Click Child Element');   
        }
    },
    initialize: function() {
      _.bindAll('render');  
     this.render();   
    }, render: function() {
        this.$el.html(this.template())
    }
});

var root = Backbone.View.extend({
    template: _.template('<div><h3>List</h3><p /><ul></ul><hr />'),
    events: {
        'click li': function() {
         alert('listitem Click - Root Element');   
        }
    },
    initialize: function() {
        _.bindAll('render');
        this.render();
    },
    render: function() {
        this.$el.html(this.template());
        $('body').append(this.el);
        var item = new child();
        this.$el.find('ul').append(item.$el.html());

    }
});

将触发在根元素中创建的事件，但不会触发子元素中的事件。

我做错了吗？

Answer 1

你做错了两件事。

首先，您的child是<li>，它不包含<li>：

template: _.template('<li>Item '+count+'</li>'),
events: {
    'click li': ...
},

所以你的click li事件不会做任何事情。事件绑定到view's el using delegate：

delegateEvents delegateEvents([events])

使用jQuery的delegate函数为视图中的DOM事件提供声明性回调。 [...]省略selector会导致事件绑定到视图的根元素（this.el）。

因此，如果您想将点击处理程序直接绑定到视图的el而不是其中一个子节点，那么您希望省略选择器：

events: {
    'click': ...
}

下一个问题是你实际上并没有将child元素插入到DOM中，而是在复制HTML：

this.$el.find('ul').append(item.$el.html());

通过附加item.$el.html()代替item.el，您将正确的HTML作为字符串抓取并插入该HTML但是您在此过程中丢失了事件;事件绑定到DOM对象item.el，而不是HTML字符串。您可以通过附加item.el：

来解决此问题

this.$el.find('ul').append(item.el);
// Or you could say, the two approaches are the same
this.$('ul').append(item.el);

演示：http://jsfiddle.net/ambiguous/K76JM/（或http://jsfiddle.net/ambiguous/kFxHQ/）

Backbone.js：动态添加未触发的事件

1 个答案: