我创建了以下聚合物元素:
<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>都会打印出一个。但是,当我运行该应用程序时,我在控制台中得到以下输出:
<span>
未捕获的TypeError:无法读取未定义的属性“ todos”
在 polymer.html line 1001
polymer.html line 1001
我不确定这里发生了什么以及如何引用从ajax响应接收回的数据。
将头撞在墙上几个小时后,我设法解决了这个问题。我创建了我叫自己的元素ajax- service是有一个叫做公共财产todos这是一个Array。在此元素中,我使用该iron-ajax元素进行ajax调用。
ajax- service
todos
Array
iron-ajax
ajax完成后,将调用一个函数,并在todos属性上设置响应。我还设置键reflectToAttribute和notify为true。这意味着该todos属性的值会反映回宿主节点上的属性,并且可用于双向绑定(有关更多信息,请参见此处)。
reflectToAttribute
notify
我的task-list-app元素如下:
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元素:
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设置在元素上之前在函数中编辑数据。
on-response