1

我在访问 Polymer 元素的 shadowDom 时遇到问题。这是元素的（截断）代码：

<polymer-element name="word-element" attributes="chars">
  <template>
    <h2>Drag and drop the letters to form anagrams</h2>
    <div id='container'>
      <div class="char" draggable="true">a</div>
      <div class="char" draggable="true">b</div>
      <div class="char" draggable="true">c</div>
      <br>
      <br>
      <template repeat="{{chars}}">
        <div class="char" draggable="true">{{}}</div>
      </template>
    </div>
  </template>
</polymer-element>

下面是 Dart 代码的样子：

@CustomTag("word-element")
class WordElement extends PolymerElement with ObservableMixin {
  @observable List chars;

inserted() {
    var charDivs = this.shadowRoot.queryAll('.char');
    print(charDivs.length);
}

charDivs.length总是返回 3，计算<div>我硬编码到<template>. 在代码中创建的任何 div<template repeat="{{chars}}">都不会通过使用shadowRoot. 任何想法为什么会这样？

此外，当我将样式应用于具有 classchar的元素时，样式将应用于所有 <div>s，包括在repeat. 但 usingshadowRoot只返回硬编码的 div。

4

2 回答 2

4

为此，您可以使用 Mutation Observers。正如其他地方所提到的，模板绑定和重复是在创建和插入自定义元素之后的某个时间异步发生的。

当节点或其子树被修改时，使用 Mutation Observer 得到通知。

这是飞镖代码：

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(shadowRoot.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}');
  }
}

这是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>
于 2013-09-08T21:19:22.357 回答
1

尝试将查询放入Timer.run.

Timer.run(() {
  print("timer");
  var charDivs = this.shadowRoot.queryAll('.char');
  print("charsDiv: ${charDivs.length}");
});

然后，当我使用列表填充chars="{{someList}}"属性时，例如：['d','e','f']，我得到了返回的完整集（即length=6）。

这是一个演示完整代码的要点：https ://gist.github.com/chrisbu/6488370

于 2013-09-08T21:02:21.783 回答