使用聚合物ajax响应

使用聚合物ajax响应

将头撞在墙上几个小时后，我设法解决了这个问题。我创建了我叫自己的元素

ajax-service

是有一个叫做公共财产

todos

这是一个

Array

。在此元素中，我使用该

iron-ajax

元素进行ajax调用。

ajax完成后，将调用一个函数，并在

todos

属性上设置响应。我还设置键

reflectToAttribute

和

notify

为true。这意味着该

todos

属性的值会反映回宿主节点上的属性，并且可用于双向绑定（有关更多信息，请参见此处）。

我的

task-list-app

元素如下：

<link rel="import" href="ajax-service.html"><link rel="import" href="task-item.html"><link rel="import" href="tiny-badge.html"><dom-module id="task-list-app">    <style>        :host {        }    </style>    <template>        <ajax-service todos="{{todos}}"></ajax-service>        <template is="dom-repeat" items="{{todos}}"> <task-item task="{{item}}"></task-item>        </template>        <div> <tiny-badge>[[todos.length]]</tiny-badge> total tasks        </div>    </template></dom-module><script>    Polymer({        is: "task-list-app"    });</script>

和我的

ajax-service

元素：

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"><dom-module id="ajax-service">    <style>        :host {        }    </style>    <template>        <iron-ajax auto url="../tasks.json" handle-as="json" on-response="tasksLoaded"></iron-ajax>    </template></dom-module><script>    Polymer({        is: "ajax-service",        properties: { todos: {     type: Array,     reflectToAttribute: true,     notify: true }        },        attached: function () { this.todos = [];        },        tasksLoaded: function (data) { this.todos = data.detail.response;        }    });</script>

这样 *** 作意味着我可以在将数据

on-response

设置在元素上之前在函数中编辑数据。