在 Dart 中，为什么下面的代码（关于 MutationObserver）不起作用？答案

【问题标题】：In Dart why the code below (about MutationObserver) dose not work?在 Dart 中，为什么下面的代码（关于 MutationObserver）不起作用？
【发布时间】：2013-09-26 11:58:23
【问题描述】：

我修改了一个 Dart 聚合物示例来测试 MutationObserver。这是行不通的！有什么建议吗？

这是 HTML 代码：

<body>   
<ul>      
  <template id="tmpl" repeat>
    <li>{{}}</li>
  </template>
</ul>
</body>

这是飞镖代码：

MutationObserver observer = new MutationObserver(_onMutation);
observer.observe(query('#tmpl'), childList: true, subtree: true); 
List timestamps = toObservable([]); 
query('#tmpl').model = timestamps;

new Timer.periodic(const Duration(seconds: 1), (_) {
    timestamps.add(new DateTime.now());
});

_onMutation(List<MutationRecord> mutations, MutationObserver observer) {
 print('hello test MutationObserver');  **//there is not any print!!!!!!!!!!!**
}

知道为什么它不起作用吗？

[注意：网页显示正常，问题出在MutationObserver]

谢谢！

【问题讨论】：

这里是一个突变观察者的例子：github.com/sethladd/dart-polymer-dart-examples/tree/master/web/…

标签： dom dart dart-webui

【解决方案1】：

我想你不想听#tmpl，而是听它的parentNode。设置模型时，HTML 模板元素将其内容扩展为同级。试试这个改变：

observer.observe(query('#tmpl').parent, childList: true, subtree: true);

【讨论】：

确认！当我看到它时很明显:)

【解决方案2】：

突变观察者事件似乎无法跨越阴影边界。

如果您将<template> 放入自定义元素中，突变观察者将起作用。

这是一个例子：

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';

@CustomTag("my-element")
class MyElement extends PolymerElement with ObservableMixin {
  final List<String> timestamps = toObservable([]);
  MutationObserver observer;

  created() {
    super.created();

    observer = new MutationObserver(_onMutation);
    observer.observe(getShadowRoot('my-element').query('#timestamps'), childList: true, subtree: true);

    new Timer.periodic(const Duration(seconds: 1), (t) {
      timestamps.add(new DateTime.now().toString());
    });
  }

  // Bindings, like repeat, happen asynchronously. To be notified
  // when the shadow root's tree is modified, use a MutationObserver.

  _onMutation(List<MutationRecord> mutations, MutationObserver observer) {
    print('${mutations.length} mutations occurred, the first to ${mutations[0].target}');
  }
}

自定义元素：

<!DOCTYPE html>

<polymer-element name="my-element">
  <template>
    <ul id="timestamps">
      <template repeat="{{ts in timestamps}}">
        <li>{{ts}}</li>
      </template>
    </ul>
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element>

主要的 HTML：

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <link rel="import" href="my_element.html">
    <script src="packages/polymer/boot.js"></script>
  </head>

  <body>
    <my-element></my-element>
  </body>
</html>

【讨论】：

有时我不能使用聚合物元素。
什么时候不能使用高分子元件？
目前我还没有学会如何在 main() 函数和之间进行通信。如果数据需要在 main() 和之间来回传输，我不知道该怎么做。就像这样：code.google.com/p/dart/issues/detail?id=12440
创建一个包含整个应用程序的自定义元素，并将数据放入其中。它可以立即作为绑定使用。加入我们的 web-ui@dartlang.org 列表，我们将为您提供帮助。
感谢您的建议。我的整个应用程序太大，不方便将其包装到中。我希望和 main() 之间有一种非常方便的通信方式。反正我可以等。现在我的问题是，由于绑定不起作用，是否有任何替代方式可用于和 main() 之间的通信？