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<div>にハードコーディングした3 を数えて、常に 3 を返します<template>。<template repeat="{{chars}}">コード内で作成された divは、 を使用しても検出されませんshadowRoot。なぜこれが当てはまるのでしょうか？

また、 class を使用して要素にスタイルを適用すると、 内で作成されたものを含むすべてcharのにスタイルが適用されます。ただし、使用すると、ハードコードされた div のみが返されます。 <div>repeatshadowRoot

4

2 に答える 2

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 に答える