Ext JS：通过XTemplate创建的DOM添加监听器的正确技术？

问题描述

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

解决方案

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

 < ul class = NAV> 
< li>< a href =example.com> item1< / a>< / li> 
<！ -  ...  - > 
< / ul> 
  

要为您在jquery中执行的锚点分配处理程序，请执行以下操作：

  $（'。nav a'）。live（'click'，function（）{
 //在锚上做某事点击
}）; 
  

$。live 即使在列表渲染之前发生处理程序分配，它也会工作。这个事实在使用xtemplate时非常重要。

幸运的是，ExtJs中有模拟 - 委托事件。只需看看代码：

  Ext.getBody（）。on（'click'，function（event，target）{
 //在锚点上执行某些操作
}，null，{
 delegate：'.nav a'
}）; 
  

有关更多信息，请查看，/ext-js/4-0/#!/api/Ext.Element-method-addListenerrel =noreferrer> docs $ c>方法。

We use XTemplates - lots of XTemplates. They are great for displaying read-only content. But have you ever added (Ext JS) listeners to DOM created via a template? Would you care to share your preferred technique for creating these listeners?

解决方案

My preferred technique is using the analog of $.live function from jquery. F.i. let's assume you are going to use xtemplate for creating simple list like the following:

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

To assign handler to the anchors you would do in jquery something like:

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

The $.live function is great because it would work even if handler assignation would happen before list rendering. This fact is extremely important when you use xtemplate.

Fortunately there is analog in ExtJs - delegating events. Just look at the code:

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

For more info take a look at docs for the Ext.Element.addListener method.

这篇关于Ext JS：通过XTemplate创建的DOM添加监听器的正确技术？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！