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>

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>

来自//someurl/posts/1

的API结果

{
   "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

由于<my-child>实际上是<my-parent>的轻DOM子项，而不是<my-parent>本地DOM（即Shadow DOM）的一部分，因此您必须使用Polymer's DOM API。

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

然后my-child.html的<script>可以更新为以下内容：

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

虽然这可能不是您想要的，但它会向您展示如何将数据从父组件传输到其轻型DOM子组件。在此示例中，我们设置每个itemes的{{1}}属性，并将该属性设置为将其文本值呈现为本地DOM文本节点。

所有这一切，我不确定这种方法是否适用于Shadow DOM v1规范（在那里你可能需要将节点作为直接子节点，然后可能有一个轻的DOM子节点或者local / shadow DOM child），但对于使用Shady DOM的Polymer 1.x，它可以解决问题。

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

1 个答案: