1

MutationObserver をテストするために、Dart ポリマーの例の 1 つを変更しました。それは動作しません！なにか提案を？

これは HTML コードです。

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

これは Dart コードです:

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!!!!!!!!!!!**
}

なぜそれが機能しないのかについて何か考えはありますか?

[注: Web ページの表示は問題ありませんが、問題は MutationObserver に関するものです]

ありがとう！

4

2 に答える 2

3

#tmpl ではなく、そのparentNodeでリッスンしたいと思います。モデルが設定されると、HTML テンプレート要素はそのコンテンツを兄弟として展開します。この変更を試してください：

observer.observe(query('#tmpl').parent, childList: true, subtree: true);
于 2013-09-21T01:26:08.943 に答える
0

ミューテーション オブザーバー イベントがシャドウ境界を超えることはないようです。

をカスタム要素に入れる<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>
于 2013-09-21T01:28:24.777 に答える