将 Iron-ajax JSON 响应条目数据绑定到嵌套的 Polymer 自定义元素答案

【问题标题】：Databind iron-ajax JSON response entry to nested Polymer custom elements将 Iron-ajax JSON 响应条目数据绑定到嵌套的 Polymer 自定义元素
【发布时间】：2016-07-12 21:12:11
【问题描述】：

我有一个 Polymer 应用程序运行一个 Iron-ajax 调用，该调用返回一个 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>

       ...

“我的表单”是：

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

而“我的名字”是：

<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 =”。

虽然我可以在 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>

【问题讨论】：

我只在自己的模板中使用了 ajax 结果。虽然我不是聚合物专家，但不确定是否可以这样做。
我也这样做了。我宁愿打一个电话，因为我需要返回几个数据项。
也许你可以使用iron-meta
您可以将其存储在localStorage 中，也可以触发iron-signal，它将包含数据并可以在my-name 元素中收听该信号。虽然我建议通过my-form 元素通过data-binding 传递数据。
@a1626 是的，我的后备方案是：“”然后是“我的名字>”。我希望不那么冗长，尽管它更符合 MVC 模式。这也是你指的吗？

标签： javascript html dom polymer polymer-1.0

【解决方案1】：

下面是关于如何在元素之间传递数据的示例 sn-p。而不是ajax call，我从元素的属性中传递了数据。需要注意的一些关键点

如果您想将整个数据传递给子元素，您可以将子元素中的name 属性替换为父元素的data 属性，名称不必相同，例如，如果子元素具有属性user类型为Object（首字母大写），那么您的绑定将是user={{data}}
如果您愿意，您可以将{{}} 替换为[[]]，除非您想将更改从子级传播到父级，在这种情况下，您必须向name 属性添加另一个参数，即notify 并设置其值确实是这样的
```
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>

【讨论】：