[英]polymer iron-ajax : How to Bind data from input element to iron-ajax's body attribute
[英]Bind iron-ajax response into nested element's property
我和这个问题有同样的问题:“聚合物如何将返回的铁阿贾克斯字符串传递到另一个聚合物元素中”,但答案并没有解决我的问题。
我有两个自定义元素(如下),我想将来自<iron-ajax>
的响应绑定到a-pagination
的属性( pagination_options
)中。 在a-pagination
,如果我使用console.log
检查属性值, pagination_options
总是记录为undefined
。 我绑定的另一个属性 ( url
) 始终填充。 为什么pagination_options
未定义?
table-list
元素:
<dom-module id="table-list">
<link rel="stylesheet" href="table-list.css" />
<template>
<iron-ajax url=[[url]] last-response={{response}} params=[[params]] auto></iron-ajax>
<template is="dom-repeat" items="{{response.data}}" as="item">
<div>[[item.content]]</div>
</template>
<a-pagination url=[[url]] pagination_options={{response.pagination}}></a-pagination>
</template>
<script>
Polymer({
is: "table-list",
properties: {
url: String,
params: Object
}
});
</script>
</dom-module>
a-pagination
元素:
<dom-module id="a-pagination">
<script>
Polymer({
is: "a-pagination",
properties: {
url: String,
pagination_options: Object
},
ready: function(){
console.log(this.url);
console.log(this.pagination_options);
}
});
</script>
</dom-module>
用法:
<table-list url="http://localhost/api/v1/article" params='{"page": 1}'></table-list>
AJAX 响应示例:
{
"status": "success",
"data": [{
"id": "1",
"content": "content 1"
},
{
"id": "2",
"content": "content 2"
}],
"pagination": {
"total_page": 1,
"per_page": 10,
"current_page": "1"
}
}
在这种情况下, ready
生命周期事件总是发生在 AJAX 响应事件之前,因此当您在ready()
记录属性时,您实际上是在记录pagination_options
的初始值( undefined
)。
相反,您应该使用这样的观察者:
Polymer({
is: 'a-pagination',
observers: ['_paginationChanged(pagination_options)'],
_paginationChanged: function(pagination_options) {
console.log(pagination_options);
},
//...
});
HTMLImports.whenReady(() => { Polymer({ is: "table-list", properties: { url: String, params: Object }, ready() { // fill response asynchronously to simulate AJAX event this.async(() => { this.response = { "status": "success", "data": [{ "id": "1", "content": "content 1" }, { "id": "2", "content": "content 2" }], "pagination": { "total_page": 1, "per_page": 10, "current_page": "1" } }; }, 1000); } }); Polymer({ is: "a-pagination", properties: { url: String, pagination_options: Object }, observers: [ '_paginationChanged(pagination_options)' ], ready() { // Don't log `pagination_options` in the `ready` // callback, since the AJAX request that fills // it might not yet have occurred, and the // resulting data bindings might not yet have // taken effect. Use observers instead. console.log('ready(): url', this.url); console.log('ready(): pagination_options', this.pagination_options); }, _paginationChanged(pagination_options) { console.log('_paginationChanged(): pagination_options', pagination_options); } }); });
<head> <base href="https://polygit.org/polymer+1.7.1/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <div>See console log</div> <table-list url="http://httpbin.org/get"></table-list> <dom-module id="table-list"> <link rel="stylesheet" href="table-list.css" /> <template> <iron-ajax url=[[url]] last-response={{response}} params=[[params]]></iron-ajax> <template is="dom-repeat" items="{{response.data}}" as="item"> <div>[[item.content]]</div> </template> <a-pagination url=[[url]] pagination_options={{response.pagination}}></a-pagination> </template> </dom-module> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.