如何在Polymer中顯示父對象的信息？

Question

我正在寫一個Polymer元素，它從API收集信息，並根據結果的對象鍵將其分發給子元素。

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-child>實際上是<my-parent>的光DOM子項，而不是<my-parent>的本地DOM（即Shadow 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子組。在這個例子中，我們設置了itemes的每個<my-child>屬性，並且該屬性被設置爲將其文本值作爲本地DOM文本節點呈現。

所有他這樣說，我不知道這種做法將與影子DOM規範V1（有可能需要具有節點是直接孩子，那麼也許有，爲淡DOM兒童或地方工作/ shadow DOM子項），但對於使用Shady DOM的Polymer 1.x，它會起作用。