Dart 如何将事件侦听器添加到动态元素？
我有以下HTML：Dart 如何将事件侦听器添加到动态元素？,dart,dartium,Dart,Dartium,我有以下HTML： <table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Description</th> <th>Actions</th> </tr> </
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>Description of Item 1</td>
<td>
<a href="#" data-action="edit" data-item-id="1">Edit</a>
<a href="#" data-action="delete" data-item-id="1">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>Description of Item 2</td>
<td>
<a href="#" data-action="edit" data-item-id="2">Edit</a>
<a href="#" data-action="delete" data-item-id="2">Delete</a>
</td>
</tr>
</tbody>
</table>
tr元素wireUpEventsDART在元素中添加事件侦听器。单击.add（）$("#order-items table")on("click", "tbody [data-action="edit"]", function(){...})
虽然
futurevoid wireUpTableEvents() {
var tableBody = query('#order-items table tbody');
// Attach Event Listener to the static tbody, which always exists.
tableBody.on.click.add((event) {
var clickedElement = event.srcElement;
var itemId = clickedElement.attributes['data-item-id'];
// Check if the clicked element was either one of the edit links or one of the delete links.
switch (clickedElement.attributes['data-action']) {
case 'edit':
// Replace print with calling a method to process edit request for this item.
print('processing edit click from item with id: $itemId');
break;
case 'delete':
// Replace print with calling a method to process delete request for this item.
print('processing delete click from item with id: $itemId');
break;
}
});
}
trtr我还发现它现在包括任何动态添加的行、预加载的行以及其他动态添加的新记录行等。听起来您需要使用Dart的未来对象。约翰·埃文斯（John Evans）最近的一篇文章给出了极好的概述。我将尝试给出一个简单的示例： 假设我有一个叫做htmlInDart的类，我称之为：
void main（）{
var htmlExample=new HtmlInDart（）.createStyles（）；
htmlExample
…然后（（htmlExample）=>htmlExample.buildPage（）
…然后（（htmlExample）=>htmlExample.addListeners（））；
}
void wireUpTableEvents() {
var editLinks = queryAll('#order-items table tbody [data-action="edit"]');
editLinks.forEach((element) {
element.on.click.add((event){
print(element.attributes['data-item-id']);
});
});
}
class-htmlInDart{
htmlInDart（）；
未来的CreateStypes（）{
最终c=新的完成符（）；
//创建一些样式
c、 完成（本）；
返回c.未来；
}
未来构建页（）{
最终c=新的完成符（）；
//构建页面
c、 完成（本）；
返回c.未来；
}
未来的addListeners（）{
最终c=新的完成符（）；
//添加一些侦听器
c、 完成（本）；
返回c.未来；
}
希望这能让您了解如何在您的案例中实现它。听起来您需要使用Dart的未来对象。John Evans最近的一篇文章提供了一个极好的概述。我将尝试给出一个简单的示例： 假设我有一个叫做htmlInDart的类，我称之为：
void main（）{
var htmlExample=new HtmlInDart（）.createStyles（）；
htmlExample
…然后（（htmlExample）=>htmlExample.buildPage（）
…然后（（htmlExample）=>htmlExample.addListeners（））；
}
void wireUpTableEvents() {
var editLinks = queryAll('#order-items table tbody [data-action="edit"]');
editLinks.forEach((element) {
element.on.click.add((event){
print(element.attributes['data-item-id']);
});
});
}
class-htmlInDart{
htmlInDart（）；
未来的CreateStypes（）{
最终c=新的完成符（）；
//创建一些样式
c、 完成（本）；
返回c.未来；
}
未来构建页（）{
最终c=新的完成符（）；
//构建页面
c、 完成（本）；
返回c.未来；
}
未来的addListeners（）{
最终c=新的完成符（）；
//添加一些侦听器
c、 完成（本）；
返回c.未来；
}
希望这能让您了解如何在您的案例中实现回调。当您首先添加行时，有什么原因不能添加回调吗？例如：
void addRow(TableElement table, ...) {
TableRowElement item = new TableRowElement();
...
table.nodes.add(item);
item.on.click.add((callback) { });
}
当您首先添加行时，是否有任何原因不能添加回调？例如：
void addRow(TableElement table, ...) {
TableRowElement item = new TableRowElement();
...
table.nodes.add(item);
item.on.click.add((callback) { });
}
这看起来很有希望。今晚我会仔细阅读这篇文章并正确回答。我记得以前在可用的文档中遇到过
futurefuture