1

我有以下 HTML：

<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 elements) 是动态添加的。

我将点击事件连接到所有Edit链接，如下所示：

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']);
    });
  });
}

如上所述，表行 ( tr elements) 是动态添加的，因此上述代码仅在我执行添加行的方法wireUpEvents 后调用时才有效。

当将来动态添加元素时，有谁知道语法或使用DART's向元素添加事件侦听器？on.click.add()

我尝试检查 DART 文档，但事件侦听器的文档是空白的。

如果我要使用 jQuery，我可以使用类似于：

$("#order-items table")on("click", "tbody [data-action="edit"]", function(){...})

...但我只想使用 DART 编写我的示例应用程序。

编辑
虽然future听起来很适合回调，但对于我需要的东西来说似乎有点矫枉过正，因为在我的场景中没有长时间运行的任务。

我能够将事件侦听器附加到静态元素但处理未来子元素的点击事件的最接近方法是：

void 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;
        }
    });
}​

上面的代码可以在加载任何实际tr元素之前执行，并且在加载tr元素后在某个未知的后期阶段仍然可以工作。

我还发现它现在涵盖了任何动态添加的行、预加载的行以及其他为新记录动态添加的行等。

4

2 回答 2

4

听起来您需要使用 Dart 的 Future 对象。John Evans 最近的一篇文章给出了很好的概述。我将尝试举一个简单的例子：

假设我有一个名为 htmlInDart 的类，我将其调用如下：

void main() {
  var htmlExample = new HtmlInDart().createStyles();
  htmlExample
      ..then((htmlExample) => htmlExample.buildPage())
      ..then((htmlExample) => htmlExample.addListeners());
}

该类可能看起来像这样：

class htmlInDart {

  htmlInDart();

  Future<htmlInDart> createStyles() {
    final c = new Completer();
    // create some styles
    c.complete(this);
    return c.future;
  }

  Future<htmlInDart> buildPage() {
    final c = new Completer();
    // build the page
    c.complete(this);
    return c.future;
  }

  Future<htmlInDart> addListeners() {
    final c = new Completer();
    // add some listeners
    c.complete(this);
    return c.future;
  }

希望这能让您了解如何为您的案例实施它。

于 2012-10-15T14:35:59.970 回答
0

当您首先添加行时，是否有任何理由无法添加回调？就像是：

void addRow(TableElement table, ...) {
    TableRowElement item = new TableRowElement();

    ...

    table.nodes.add(item);
    item.on.click.add((callback) { });
}
于 2012-10-15T14:49:56.630 回答