在重复模板中使用聚合物铁ajax [英] Using Polymer iron-ajax in repeating template

问题描述

如何加载json文件并在重复模板中使用数据?这段代码不会产生任何结果:

How do I load a json file and use the data in a repeating template? This code doesn't produce anything:

<dom-module id="name-list">
    <template>
        <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax>
        <template is="dom-repeat" items="{{data}}">
            <div>First name: <span>{{item.firstName}}</span></div>
            <div>Last name: <span>{{item.lastName}}</span></div>
        </template>
    </template>
</dom-module>

<script>
    Polymer({
        is: "name-list"
    });
</script>

这是我的json文件(在凡斯克的回复后更正):

Here's my json file ( corrected after vasek's reply):

{
    [
        {
            "firstName": "John",
            "lastName": "Smith"
        },{
            "firstName": "Jane",
            "lastName": "Doe"
        }
    ]
}

我想要以下内容:

<div>First name: <span>John</span></div>
<div>Last name: <span>Smith</span></div>
<div>First name: <span>Jane</span></div>
<div>Last name: <span>Doe</span></div>

我在代码中的其他地方包括了Iron-ajax.我已经测试了常规功能.它有效，只是在数据绑定的上下文中不起作用.

I'm including iron-ajax elsewhere in my code. I've already tested the general functionality. It works, just not in the context of data-binding.

推荐答案

首先，正如vasek所说，您的JSON不正确. dom-repeat需要一个数组进行迭代，并且您的JSON当前正在返回一个对象.其次，您错误地访问了iron-ajax元素上的属性.由于文档状态

Firstly as vasek says, your JSON is incorrect. dom-repeat needs an array to iterate over and your JSON is currently returning an object. Secondly, you are accessing the properties on the iron-ajax element incorrectly. As the docs state

为了使用属性配置元素的驼峰式属性，应在属性名称中使用双引号.

In order to configure camel-case properties of elements using attributes, dash- case should be used in the attribute name.

您正在尝试设置handleAs和lastResponse.为此，您需要将其更改为破折号:

You are trying to set handleAs and lastResponse. In order to do these you need to change them to the dash-case:

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

否则，其他所有内容都应正常工作.

Otherwise, everything else should work correctly.

这篇关于在重复模板中使用聚合物铁ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！