Databind iron-ajax JSON 对嵌套 Polymer 自定义元素的响应条目

Question

我有一个 Polymer 应用程序运行ing 一个 iron-ajax 调用一个 returns json 字符串的服务：

{
    "name": "John"
}

主页上的 Polymer 代码是：

<link rel="import" href="/elements/my-form.html">

<dom-module id="my-app">

    <template>

        ...

        <iron-ajax auto url="/grabData" handle-as="json" last-response="{{data}}"></iron-ajax>

        <iron-label>
            From iron-ajax = {{data.name}}
        </iron-label>

        <my-form></my-form>

       ...

"my-form" 是：

<link rel="import" href="/my-name.html">

<dom-module id="my-form">

    <template>
        <my-name></my-name>
    </template>

    <script>
        Polymer({
            is: 'my-form'
        });
    </script>

</dom-module>

而"my-name"是：

<dom-module id="my-name">

    <template>
        <iron-label>
            From my-name = {{data.name}}
        </iron-label>
    </template>

    <script>
        Polymer({
            is: 'my-name'
        });
    </script>

</dom-module>

当运行、"From iron-ajax = John" 和 "From my-name =" 时。

虽然我可以在我的名字中使用单个 ajax 调用，但我不想对每个自定义元素都这样做。我宁愿在一次调用中获取我的数据，并让自定义元素访问返回的数据。

如何在不通过 my-form 元素传递值的情况下获取 my-name 中的 'name'？

---更新---

为了更清楚地了解预期结果，这里有更多信息。

最终我想获得一个非常大的 JSON 包含多个条目的字符串：

{
    "name": "John",
    "address": [{
        "street" : "14 Baker Street",
        "city" : "somewhereville"
    }],
    "phone": "123-1234"
    ...
}

并让自定义元素处理每个条目：

<dom-module id="my-form">

    <template>
        <my-name></my-name>
        <my-address></my-address>
        <my-phone></my-phone>
        ...
    </template>

Answer 1

下面是有关如何在元素之间传递数据的示例片段。而不是 ajax call 我已经从元素的属性传递了数据。需要注意的一些关键点

如果您想将整个数据传递给 child 元素，您可以将 child 元素中的 name 属性替换为 data 属性 of parent，名称不必相同，例如，如果 child 有一个属性 user，类型为 Object（第一个字母大写），那么你的绑定将是 user={{data}}
如果你愿意，你可以用 [[]] 替换 {{}}，除非你想传播从 child 到 parent 的变化，在这种情况下你将必须向 name 属性添加另一个参数，即 notify 并将其值设置为 true，例如
```
name:{
 type:String,
 notify:true
}
```
在你的情况下（使用 ajax 调用）在 properties 中列出 name 和 data 是可选的，但我会推荐它作为它可以很容易地向属性添加新功能（如通知），也可以很容易地跟踪大型元素中的所有 properties。
有关 properties 和 data-binding 的更多详细信息，请查看这些链接。 properties, data-binding

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">


<dom-module id="my-app">
  <template>
    Name from App: {{data.name}}
    <br>
    <my-form name={{data.name}}></my-form>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-app',
    properties: {
      data: {
        type: Object
      }
    }
  });
</script>



<dom-module id="my-form">
  <template>
    Name from Form: {{name}}
    <br>
    <my-name name={{name}}></my-name>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-form',
    properties: {
      name: {
        type: String
      }
    }
  });
</script>

<dom-module id="my-name">
  <template>
    Name from Name: {{name}}
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-name',
    properties: {
      name: {
        type: String
      }
    }
  });
</script>


<my-app data='{"name":"User1"}'></my-app>

Databind iron-ajax JSON 对嵌套 Polymer 自定义元素的响应条目

Databind iron-ajax JSON response entry to nested Polymer custom elements

html

javascript

dom

polymer

polymer-1.0