Databind Iron-ajax JSON响应条目到嵌套的Polymer自定义元素 [英] Databind iron-ajax JSON response entry to nested Polymer custom elements

问题描述

我有一个Polymer应用程序，它对返回json字符串的服务运行了一个铁质的ajax调用:

I've got a Polymer app running an iron-ajax call to a service that returns a json string:

{
    "name": "John"
}

主页上的Polymer代码为:

The Polymer code on the main page is:

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

When run, "From iron-ajax = John", and "From my-name =".

虽然我可以在my-name中使用单个ajax调用，但我不想对每个自定义元素都执行此操作.我宁愿一次调用就获取数据，并让自定义元素访问返回的数据.

While I could use a single ajax call within my-name, I'd don't want to do this for every custom element. I'd rather acquire my data in one call and have custom elements access the returned data.

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

How do I acquire 'name' within my-name without passing the value through the my-form element?

-更新---

要更清楚地了解期望的结果，请点击此处.

For a little more clarity on desired outcomes, here's a little more info.

最终，我想获取一个包含多个条目的超大JSON字符串:

Ultimately I'd like to acquire a very large JSON string with multiple entries:

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

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

And have custom elements handle each entry:

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

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

推荐答案

下面是有关如何在元素之间传递数据的示例代码段.而不是ajax call，我从元素的属性传递了数据.一些要注意的要点

Below is the example snippet on how to pass data between elements. Instead of ajax call i've passed data from element's attribute. Some key points to be noted

• 如果要将整个数据传递给子元素，则可以用父元素的data属性替换子元素中的name属性，名称不必相同，例如，子元素具有属性user类型为Object(首字母大写)的您的绑定将为user={{data}}

• 如果需要，可以将{{}}替换为[[]]，除非要将更改从子级传播到父级，在这种情况下，您将不得不向name属性添加另一个参数，即notify和将其值设置为true，类似

• In case you want to pass whole data to child elements you can replace name property in child element with data property of parent, names doesn't have to be same, eg if child has a property user with type Object(first letter caps) then your binding will be user={{data}}

• If you want you can replace {{}} with [[]], unless you want to propagate change from child to parent in which case you will have to add another parameter to name property namely notify and set its value as true, something like

name:{
 type:String,
 notify:true
}

在您的情况下(使用ajax调用)在properties内列出name和data是可选的，但我会推荐它，因为这样可以轻松地向属性添加新功能(例如notify )，还可以轻松跟踪大元素中的所有properties.

In your case(with ajax call) listing name and data inside properties is optional, but i'll recommend it as it makes it easy to add new features to a property(like notify) and also makes it easy to track all the properties in a large element.

有关properties和data-binding的更多详细信息，请检出这些链接. 属性，

For more details on properties and data-binding checkout these links. 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自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！