在重复模板中使用聚合物铁-ajax

Question

如何加载 json 文件并在重复模板中使用数据？此代码不产生任何结果：

<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 文件（编辑：在 vasek 回复后更正）：

{
    [
        {
            "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。我已经测试了一般功能。它有效，只是不在数据绑定的上下文中。

Answer 1

您的 json 文件格式错误。应该是这样的：

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

Answer 2

首先，正如 vasek 所说，您的 JSON 是不正确的。 dom-repeat 需要一个数组来迭代，而您的 JSON 当前正在返回一个对象。其次，您错误地访问了 iron-ajax 元素上的属性。作为docs状态

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

您正在尝试设置 handleAs 和 lastResponse。为了做到这些，您需要将它们更改为破折号：

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

否则，其他一切都应该正常工作。

Answer 3

我也遇到了类似的代码，不幸的是上面的答案并没有解决我的问题。但是，当我将 <iron-ajax> 元素放在 <template is="dom-repeat"> 之后时，它对我有用。

在重复模板中使用聚合物铁-ajax

Using Polymer iron-ajax in repeating template

polymer