2

次のコードを含むカスタム要素 (admin-button.html) を作成しました。

<polymer-element name="admin-button">
  <template>
    <paper-item class="chip-container" hero-p>
      <div class="chip" hero-id="addPres" hero>
        <div class="chip-top" hero-id="addPres-art" hero></div>
        <div class="chip-bottom" cross-fade>
          <div class="chip-title-overlay" title="Create presentation"></div>
          <div class="chip-title">Create presentation</div>
        </div>
      </div>
    </paper-item>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

それ自体がカスタム要素である別のファイル (table-body.html) で、このファイルを動的にインポートし、要素のインスタンスを作成して、次のようにメニュー リスト (#chip-menu) に追加します。

<script>
  var poly = this;

  Polymer.import(["elements/admin-button.html"], function() {
    var button = document.createElement("admin-button");
    poly.$.chipMenu.appendChild(button);
  });
</script>

ここまでは問題ありません。しかし今、この新しく作成されたボタンに「オンタップ」イベント ハンドラーを与えたいと思います。私は単純に属性を設定しようとしました

button.setAttribute("on-tap", "{{ eventHandler }}");

しかし、これは機能しませんでした-要素を適切に登録することと関係があると思われますが、ポリマードキュメントのカスタム要素にイベントハンドラーを動的に設定する方法についてのヒントが見つからないようです.

このように要素をHTMLにハードコードすると

<admin-button on-tap="{{ eventHandler}}"></admin>

で要素をインスタンス化します

Polymer.import(["elements/admin-button.html"]);

できます。しかし、ページの読み込み時に HTML コードにカスタム要素を入れたくありません。

これはできますか？

4

2 に答える 2

3

試してみてくださいbutton.addEventListener('tap',eventHandler);。

于 2015-04-02T11:12:34.443 に答える