我有以下聚合物元素：
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="task-list-app">
<style>
:host {
}
</style>
<template>
<iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"></iron-ajax>
<template is="dom-repeater" items="{{todos}}">
<span>hello</span>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "task-list-app",created: function () {
this.todos = [];
},handleResponse: function (data) {
this.todos = data.detail.response;
}
});
</script>
我通过执行以下操作在我的index.html中调用它：
<task-list-app></task-list-app>
我希望对于todo数组中返回的每个对象,< span>将被打印.但是,当我运行应用程序时,我在控制台中获得以下输出：
Uncaught TypeError: Cannot read property ‘todos’ of undefined
在polymer.html第1001行中
我不确定这里发生了什么以及如何引用从ajax响应中收到的数据.
解决方法
首先,您用于循环数据的第二个模板应该是“dom-repeat”而不是“dom-repeater”.其次,您可以直接将iron-ajax的响应绑定到循环模板.像这样,
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="task-list-app">
<style>
:host {
}
</style>
<template>
<iron-ajax auto url="../tasks.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="[[ajaxResponse.todos]]">
<span>{{item.todoItem}}</span>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "task-list-app"
});
</script>
因此,您基本上将last-response属性的值绑定到循环模板.
