Question

我有一个Backbone View，它呈现一个外部Handlebars模板（* .hbs）。此视图在另一个实例化的View中呈现，基本上是：

MainAppView
render: function() {
//load main layout
var childView = new ChildView();
}


ChildView

render: function() {
$('body').append(this.template(data));
}

template:

<ul id="someId">
<li><a> {{data}}</a></li>
</ul>

and an events hash in the childView like this:

events: {
  'click #someId li a' : 'doSomething'
}

doSomething: function() { event.preventDefault(); console.log("exit");}

这就是它的要点。问题是，选择器#someId li a不起作用，无法执行doSomething

我使用jQuery验证了选择器，通过在Chrome控制台中绑定功能doSomething，工作正常。

我想我知道为什么它在Backbone中不起作用，HBS模板是在实例化ChildView后触发delegateEvents后呈现的，这意味着我使用的选择器不存在任何元素，因此没有绑定。我尝试用身体做前缀，但不，也没用。

我需要做什么？

Answer 1

您的ChildView渲染方法将视图的内容渲染到正文中而不是内部。你渲染应该看起来像这样：

render: function() {
    this.$el.append(this.template(data));
    $('body').append(this.$el);
}

未调用doSomething函数的原因是因为Backbone中的事件被委托给视图的根元素（view.el）。以下基本上是Backbone正在做的事情：

'click #someId li a' : 'doSomething'

变为

view.$el.on('click', '#someId li a', view.doSomething);

如果您将模板内容直接附加到body而不是视图的el，则视图将永远不会捕获事件，因此不会调用回调。

Answer 2

我认为doSomething函数缺少参数event所以添加参数：

doSomething: function(e) { e.preventDefault(); console.log("exit");}

Backbone JS事件不会触发动态添加的元素

2 个答案: