如何显示Polymer中父对象的信息？

Question

I am writing a Polymer element that collects information from an API and which it should distribute to child elements based on the result's object keys.

The my-parent element executes the ajax call. The response if fetched in the response() function.

My question is this: how can I store the information received in a way, that I can distribute and display it to the child element?

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>

my-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 result from //someurl/posts/1

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

my-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

Since <my-child> is actually a light DOM child of <my-parent> and not part of <my-parent> 's local DOM (ie Shadow DOM), you'll have to use Polymer's DOM API .

In my-parent.html, remove the on-response="onResponse" attribute from <iron-ajax> and instead update your <script> to the following:

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;
  }
})

and then my-child.html's <script> can be updated to the following:

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

Although that may not be exactly what you want, it shows you how to transfer data from a parent component to its light DOM children. In this example, we're setting the itemes property of each <my-child> and that property is set to render its text value as a local DOM text node.

All of that being said, I'm not sure this approach will work with the Shadow DOM v1 spec (there you may need to have the nodes be direct children of and then perhaps have the as a light DOM child or local/shadow DOM child), but for Polymer 1.x using Shady DOM, it'll do the trick.