2

DOM から Polymer カスタム要素の属性にアクセスする方法、または Polymer.register から DOM にデータを送信する方法を探しています。

以下のこの非常に単純な要素は、2 つの値を取り、それらを乗算して、結果をそのresult属性に配置します。

外部からこの結果にアクセスするにはどうすればよいですか?

<element attributes='value times result' name='value-box'>
  <template>
    <p>{{result}}</p>
  </template>

  <script>
    Polymer.register(this, {
      ready: function() {
        if (this.value != null && this.times != null) {
          this.result = this.value * this.times;
        }
      }
    });
  </script>
</element>
4

2 に答える 2

6

resulttimesや と同じように、要素のプロパティvalueです。通常の HTML 要素のプロパティと同様に、JS の外部からアクセスできます。例えば：

<value-box value="2" times="10"></value-box>
<script>
  document.querySelector('value-box').result;
</script>

要素の内部で、計算されたプロパティを/変更resultとして最新の状態に保つことが必要です。それにはいくつかの方法があります。1 つは、ウォッチャーを使用することです[ 1 ]:timesvalue<property>Changed

<element name="value-box" attributes="value times result">
  <template>
    <p>result: {{result}}</p>
  </template>
  <script>
  Polymer.register(this, {
    valueChanged: function() {
      this.result = this.value * this.times;
    },
    timesChanged: function() {
      this.result = this.value * this.times;
    }
  });
  </script>
</element>

デモ: http://jsbin.com/idecun/2/edit

または、ゲッターをresult次のように使用できます。

  Polymer.register(this, {
    get result() {
      return this.value * this.times;
    }
  });

デモ: http://jsbin.com/oquv​​ap /2/edit

注:この 2 番目のケースでは、ブラウザーが をサポートしていない場合Object.observe、Polymer はタイマーをダーティ チェックに設定しますresult。これが、この 2 番目の例でコンソールに「here」と表示される理由です。で「実験的な WebKit 機能」を有効にして Chrome Canary で同じことを実行するとabout:flags、タイマーは表示されません。Object.observeどこにでもいるのが待ちきれないもう 1 つの理由です。:)

お役に立てれば。

于 2013-07-07T21:20:45.240 に答える
0

これに役立つフォローアップを追加したかっただけです（質問には回答がありましたが）。

私のフォローアップは、実際の回答に関する次のコメントへの回答です。

jQuery での選択がうまくいかなかった理由が気になります。カスタム要素を認識しませんか? — クレタス 13 年 7 月 8 日 19:57 に

jQuery が要素を認識しなかった最も可能性の高い理由は、その時点でブラウザの実行時に要素が完全に形成されていなかったためです。

私は自分の github ページで ASP.NET MVC + ポリマー js サンプル アプリを開発しているときにこの問題に遭遇しました。基本的に私がしようとしていたのは、ポリマーがすべてを使用可能にする前に、ポリマー オブジェクトのメソッドを呼び出してプロパティにアクセスすることでした。

使用していたコードをボタン クリックに移動すると (コンポーネントの準備が整ったことを視覚的に確認した後に手動でトリガーできるようになりました)、すべて正常に機能しました。

今のところ、あまりにも早く何かにアクセスしようとすると、例: jQ doc.ready ハンドラーで、このようなあらゆる種類のばかげた問題に遭遇する可能性が高くなります。

アクションを遅らせる方法、またはポリマー信号を使用して、コンポーネントの準備ができていることを知らせるフラグを設定するコンポーネントの準備ができているハンドラーから外部エージェントに信号を送る方法を見つけることができれば、これを簡単に並べ替えることができます。

于 2014-02-05T21:53:07.287 に答える