3

Polymer 1.0 要素の適切な使用法<iron-meta>は混乱を招きます。ここに Github のリンクがあります。そして、ここにPolymer デモ サイトへのリンクがあります。

誰かがそれを機能させる方法の適切なコード例を提供できますか?

これは私がこれまでに持っているコードです。

<dom-module id="generic-element">
  <style>...</style>
  <template>
    <iron-meta id="meta" key="info" value="foo/bar"></iron-meta>
    The <code>value</code> stored at <code>key="info"</code> is <code><span>{{test}}</span></code>. 
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'generic-element',
      properties: {
        test: {
          value: function(){
            return "Hello world"; // This is the only thing I can get to work so far.
         // return (new Polymer.IronMetaQuery({key: 'info'}).value); // Doesn't totally break.
         // All my other below attempts totally fail. Everything breaks.
         // return this.$.meta.IronMetaQuery({key: 'info'}).value;
         // return this.IronMetaQuery({key: 'info'}).value;
         // return this.$.meta.byKey('info').getAttribute('value');
         // return this.$.meta.byKey('info').value;
          }
        }
      }
    });
  })();
</script>

問題へのGithubリンクは次のとおりです。そして、完全な Web アプリのコンテキストで完全な問題コードを含むGithub リポジトリを次に示します。

4

1 に答える 1

4

コードの問題は、要素のプロパティの既定値を、同じ要素のテンプレート自体の中で宣言されている値に設定しようとしていることです。要素が作成されてから要素がアタッチされるまでの間に発生する 2 つのことには、次のようなものがあります。a) プロパティのデフォルト値が設定されます。b) テンプレートが DOM にスタンプされる準備が行われます。これらのタスクは非同期で発生するため、本質的に競合状態を生成しています。

コールバックtest内でデフォルト値を設定してみてください。コールバックは、DOM にアクセスする準備ができていることを保証します。あなたの場合は、キーを宣言した場所です。ready()ready()<iron-meta>

<dom-module id="generic-element">
  <style>...</style>
  <template>
    <iron-meta id="meta" key="info" value="foo/bar"></iron-meta>
    The <code>value</code> stored at <code>key="info"</code> is <code><span>{{test}}</span></code>. 
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'generic-element',
      properties: {
        test: String
      },
      ready: function () {
        // this will work
        this.test = this.$.meta.byKey("info");
      }
    });
  })();
</script>

jsbin: http://jsbin.com/vosekiwehu/edit?html,output

于 2015-07-07T08:27:21.303 に答える