将侦听器添加到通过 XTemplate 创建的 DOM 的正确技术？

我们使用 XTemplates - 很多 XTemplates。它们非常适合显示只读内容。但是您是否曾向通过模板创建的 DOM 添加（Ext JS）侦听器？您愿意分享您创建这些侦听器的首选技术吗？

我首选的技术是使用类似的$.live来自 jquery 的函数。 F.i.假设您将使用 xtemplate 创建简单列表，如下所示：

<ul class="nav">
    <li><a href="example.com">item1</a></li>
    <!-- ... -->
</ul>

要将处理程序分配给锚点，您可以在 jquery 中执行如下操作：

$('.nav a').live('click', function(){
    // do something on anchor click
});

The $.live函数很棒，因为即使处理程序分配发生在列表渲染之前，它也可以工作。当您使用 xtemplate 时，这一事实非常重要。

幸运的是，ExtJs 中有类似的东西——委托事件。看看代码：

Ext.getBody().on('click', function(event, target){
        // do something on anchor click
    }, null, {
        delegate: '.nav a'
    });

欲了解更多信息，请查看docs为了Ext.Element.addListener method.