javascript – 使用聚合物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" 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属性的值绑定到循环模板.