Как отображать информацию из родительского объекта в Polymer?

Question

Я пишу элемент Полимер, который собирает информацию из 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> на самом деле является легким DOM-ребром от <my-parent>, а не частью локальной DOM <my-parent> (т. Е. Shadow DOM), вам нужно будет использовать Polymer's DOM API.

В моей-parent.html, удалить атрибут on-response="onResponse" из <iron-ajax> и вместо того, чтобы обновить ваш <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.

Все это говорит о том, что я не уверен, что этот подход будет работать с спецификацией Shadow DOM v1 (там вам, возможно, потребуется, чтобы узлы были прямыми дочерними элементами, а затем, возможно, были как светлые DOM-файлы или локальные/shadow DOM), но для Polymer 1.x, используя Shady DOM, он будет делать трюк.