javascript 将侦听器添加到通过 XTemplate 创建的 DOM 的正确技术？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8079942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper technique to add listeners to DOM created via an XTemplate?
提问by Upperstage
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?
我们使用 XTemplates - 很多 XTemplates。它们非常适合显示只读内容。但是您是否曾经向通过模板创建的 DOM 添加（Ext JS）侦听器？您愿意分享您首选的创建这些侦听器的技术吗？
回答by Molecular Man
My preferred technique is using the analog of $.livefunction from jquery. F.i. let's assume you are going to use xtemplate for creating simple list like the following:
我的首选技术是使用$.livejquery 中的函数模拟。Fi 让我们假设您将使用 xtemplate 创建如下所示的简单列表：
<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:
要将处理程序分配给锚点，您可以在 jquery 中执行以下操作：
$('.nav a').live('click', function(){
// do something on anchor click
});
The $.livefunction is great because it would work even if handler assignation would happen before list rendering. This fact is extremely important when you use xtemplate.
该$.live功能很棒，因为即使在列表呈现之前分配处理程序，它也能工作。当您使用 xtemplate 时，这一事实非常重要。
Fortunately there is analog in ExtJs - delegating events. Just look at the code:
幸运的是，ExtJs 中有类似的东西——委托事件。看看代码：
Ext.getBody().on('click', function(event, target){
// do something on anchor click
}, null, {
delegate: '.nav a'
});
For more info take a look at docsfor the Ext.Element.addListenermethod.
有关更多信息，请查看该方法的文档Ext.Element.addListener。
回答by jvenema
Shamelessly modified version of MolecularMan's concept:
MolecularMan 概念的无耻修改版：
Ext.live = function (selector, event, handler) {
Ext.getBody().on(event, function(event, target){
handler.apply(Ext.get(target), arguments);
}, null, {
delegate: selector
});
};
Usage:
用法：
Ext.live('.myclass', 'click', function () {
this.fadeOut();
});
回答by eduardosouza
The simplest approach we adopt here is the following:
我们在这里采用的最简单的方法如下：
// Function to be called on DOM event
var functionCallback = function () {
console.log('hello');
}
// function to bind elements created via XTemplate and DOM events
function bind(Ext.Element element, String selector, Obj callback) {
var els = element.query(selector);
Ext.Array.each(els, function (item, index, allItems) {
item.addEventListener('click', callback, false);
});
}
And the usage:
以及用法：
var tpl = new Ext.XTemplate(...);
var data = [..]
var returnedEl = tpl.append(otherElem, data, true);
bind(returnedEl, 'div.my-css-class', functionCallback);
回答by Sergey Stolyarov
Well, you can use something like this:
好吧，你可以使用这样的东西：
- create id via Ext.id(), pass it to the template to some element
- then fetch that element using Ext.get()
- attach the listener to just found element
- 通过 Ext.id() 创建 id，将其传递给模板到某个元素
- 然后使用 Ext.get() 获取该元素
- 将侦听器附加到刚刚找到的元素
