Question

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

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

       ...

＆＃34;我的形式＆＃34;是：

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

而且＆＃34;我的名字＆＃34;是：

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

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

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

</dom-module>

运行时，＆＃34;来自iron-ajax = John＆＃34;和＆＃34;来自my-name =＆＃34;。

虽然我可以在我的名字中使用单个ajax调用，但我并不想为每个自定义元素执行此操作。我宁愿在一次调用中获取我的数据，并让自定义元素访问返回的数据。

我如何获得＆＃39; name＆＃39;在my-name中没有通过my-form元素传递值？

---更新---

为了更清楚地了解所需的结果，请点击此处了解更多信息。

最终，我想获得一个包含多个条目的非常大的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我已经从元素的属性中传递了数据。需要注意的一些要点

如果要将整个数据传递给子元素，可以使用父元素的name属性替换子元素中的data属性，名称不必相同，例如，如果是子元素有一个属性user，其类型为Object（首字母大写字母），那么您的绑定将为user={{data}}
如果您愿意，可以将{{}}替换为[[]]，除非您希望将更改从子级传播到父级，在这种情况下，您必须向name添加另一个参数属性为notify，并将其值设置为true，类似于
```
name:{
 type:String,
 notify:true
}
```
在您的情况下（使用ajax调用）name内的data和properties内的properties是可选的，但我会推荐它，因为它可以轻松添加属性的新功能（如通知），也可以轻松跟踪大型元素中的所有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>结帐这些链接的详细信息。 properties，data-binding

＆＃13;

var timeItems = [];
$("div[class*='field-name-field-time-']").each(function (i, e) {

    var text = $(e).text().substring(3,5); //Dont forget to store them somewhere
    timeItems.push($(e));
});

＆＃13;

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

1 个答案: