Javascript 使用聚合物ajax响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30591409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using polymer ajax response
提问by Ben Thomas
I have the following polymer element which I have created:
我创建了以下聚合物元素：
<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>
I am calling this inside my index.html by doing:
我通过执行以下操作在我的 index.html 中调用它：
<task-list-app></task-list-app>
I am expecting that for every object returned in the todo array, a <span>will be printed. However, when I run the app, I get the following output in the console:
我期望对于在 todo 数组中返回的每个对象，<span>都会打印 a 。但是，当我运行该应用程序时，我在控制台中得到以下输出：
Uncaught TypeError: Cannot read property 'todos' of undefined
未捕获的类型错误：无法读取未定义的属性“todos”
in polymer.html line 1001
在 polymer.html line 1001
I am not sure what is happening here and how to reference the data received back from the ajax response.
我不确定这里发生了什么以及如何引用从 ajax 响应收到的数据。
回答by Joseph Khan
First of all second template that you are using to loop through your data should be a "dom-repeat" and not a "dom-repeater". Secondly you can directly bind the response of iron-ajax to your looping template. Like this,
首先，您用来循环数据的第二个模板应该是“ 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>
So you are basically binding value of last-responseproperty to your looping template directly.
所以你基本上是直接将last-response属性的值绑定到你的循环模板。
回答by Ben Thomas
After banging my head on the wall for a few hours I have managed to solve this. I have created my own element called ajax-servicethat has a public property called todoswhich is an Array. In this element, I use the iron-ajaxelement to do the ajax call.
在我的头撞墙几个小时后，我设法解决了这个问题。我创建了我叫自己的元素ajax-service是有一个叫做公共财产todos这是一个Array。在这个元素中，我使用该iron-ajax元素来进行ajax调用。
When the ajax is complete, a function is called and the response is set on the todosproperty. I have also set the keys reflectToAttributeand notifyto true. This means the todosproperty's value is reflected back to the attribute on the host node and that it is available for two-way binding (see herefor more information).
当 ajax 完成时，将调用一个函数并在todos属性上设置响应。我也将键reflectToAttribute和设置notify为true。这意味着todos属性的值会反映回主机节点上的属性，并且它可用于双向绑定（有关更多信息，请参见此处）。
My task-list-appelement is as follows:
我的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>
and my ajax-serviceelement:
和我的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>
Doing it this way means I am able to edit the data in the on-responsefunction before setting it on the element.
这样做意味着我可以在将数据on-response设置在元素上之前编辑函数中的数据。
回答by myfrom
You need to define property before using it in scripts:
在脚本中使用它之前，您需要定义属性：
<script>
Polymer({
is: "task-list-app",
properties: {
todos: {
type: Array,
notify: true
}
},
handleResponse: function (data) {
this.todos = data.detail.response;
}
});
</script>
