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

本文介绍了在重复模板中使用聚合物铁ajax的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何加载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.