親オブジェクトの情報をPolymerに表示する方法は？

Question

私は、APIから情報を収集し、結果のオブジェクトキーに基づいて子要素に配布する必要があるPolymer要素を作成しています。

my-parent要素は、ajax呼び出しを実行します。 response()関数で取得された場合の応答です。

私の質問はこれです。受信した情報をどのようにして保存し、それを配布して子要素に表示できるのですか？

App.html

<my-parent collector="1"> 
    <h1>The Results</h1> 
    <h3><my-child name="title"><!-- should output FOO --></my-child></h3> 
    <h3><my-child name="description"><!-- should output BAR --></my-child></h3> 
</my-parent> 

私-parent.html

<dom-module id="my-parent"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <content></content> 
    <iron-ajax auto url="//someurl/posts/[[collector]]" handle-as="json" last-response="{{response}}" on-response="onResponse" id="xhr"></iron-ajax> 
</template> 
    <script> 
     Polymer({ 
     is: 'my-parent', 
     properties: { 
      collector: { 
      type: String, 
      notify: true 
      }, 
      response: { 
      type: String 
      } 
     }, 
     onResponse: function(response){ 
      /* WHAT TO DO HERE? */ 
     } 
     }) 
    </script> 
</dom-module> 

APIの結果から//someurl/posts/1

{ 
    "title": "FOO", 
    "description": "BAR" 
} 

私-のchild.html

<dom-module id="my-child"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    {{itemes}} 
    </template> 
    <script> 
     Polymer({ 
     is: 'my-child', 
     properties: { 
      itemes: { 
      type: String, 
      value: function(){ 
       return "what to do here?"; 
      } 
      } 
     }, 
     key: { 
      type: String, 
      notify: true 
      } 
     }) 
    </script> 
</dom-module> 

Answer 1

は実際に<my-parent>の軽DOM子であり、<my-parent>のローカルDOM（つまりシャドーDOM）の一部ではないため、Polymer's DOM APIを使用する必要があります。私-parent.htmlで

、<iron-ajax>からon-response="onResponse"属性を削除し、代わりにあなたの<script>は、次のように更新します。

Polymer({ 
    is: 'my-parent', 
    properties: { 
    collector: { 
     type: String, 
     notify: true 
    }, 
    response: { 
     type: Object, 
     observer: '_handleResponse' 
    } 
    }, 
    _handleResponse: function(response) { 
    Polymer.dom(this).querySelector('[name="title"]').itemes = response.title; 
    Polymer.dom(this).querySelector('[name="description"]').itemes = response.description; 
    } 
}) 

、その後、私の-のchild.htmlの<script>を次のように更新することができます。

Polymer({ 
    is: 'my-child', 
    properties: { 
    itemes: { 
     type: String 
    } 
    } 
}) 

これは正確なものではありませんが、親コンポーネントから軽いDOMの子にデータを転送する方法を示しています。この例では、それぞれ<my-child>のitemesプロパティを設定しており、そのプロパティはテキスト値をローカルDOMテキストノードとしてレンダリングするように設定されています。

このアプローチは、Shadow DOM v1仕様ではうまくいきません（そこには、ノードを直接子にする必要があるかもしれません。/shadow DOMの子）、Shady DOMを使用しているPolymer 1.xではそのトリックを行います。