Iron-ajax 数据绑定
Iron-ajax Data binding
如何在新的 Polymer v1.0 中进行数据绑定?
我在 polymer iron-ajax : How to Bind data from input element to iron-ajax's body attribute
中看到了一个答案
但这对我没有帮助,这是我的代码
<dom-element id="test-app>
<template>
...
<iron-ajax
auto
url="https://www.googleapis.com/youtube/v3/search"
params="{{ajaxParams}}"
handleAs="json" lastResponse="{{response}}"
method='GET'>
</iron-ajax>
</template>
</dom-module>
脚本
Polymer({
is:"Test-app",
properties: {
qry: {
type: String,
value: 'Cat'
},
key1: {
type: String,
value: 'myapikey'
},
part1: {
type: String,
value: 'snippet'
},
maxResults1: {
type: Number,
value: 10
},
ajaxParams: {
type: String,
computed: 'processParams(part1, qry, maxResults1, key1)'
}
},
processParams: function(part1, qry, maxResults1, key1){
var param = JSON.stringify({part: part1, q:qry, maxResults: maxResults1, key:key1});
console.log(param);
return param;
}
});
</script>
我在控制台中以 JSON 字符串的形式获得了正确的登录信息,但是当返回此值时,该值是按字面意义获取的(与上面提供的 link 中所述的问题相同)并且不是它的价值。
我在控制台中收到错误请求代码 400。非常感谢任何帮助。
属性 params
的类型是 Object
。与链接示例不同,您可以 return 一个本地对象。
processParams: function(part1, qry, maxResults1, key1) {
return {
part: part1,
q: qry,
maxResults: maxResults1,
key:key1
};
}
<template is="dom-bind" id="app">
<iron-ajax auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="[[ajaxResponse.items]]">
<div class="horizontal-section">
<h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2>
<iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
<p>[[item.snippet.description]]</p>
</div>
</template>
<script>
var app = document.querySelector('#app');
app.url = function (videoId) {
return 'https://www.youtube.com/watch?v=' + videoId;
};
</script>
对不起。 ajax 查询 returns json Youtube 视频数组,参数列在 属性 "params" 中。绑定“[[ajaxResponse.items]]”的一种方式将响应绑定到重复模板 "dom-repeat"。 url 函数只是将 videoId 附加到各个链接。我直接从聚合物入门套件
随附的 iron-ajax 演示中复制了代码
如何在新的 Polymer v1.0 中进行数据绑定?
我在 polymer iron-ajax : How to Bind data from input element to iron-ajax's body attribute
中看到了一个答案但这对我没有帮助,这是我的代码
<dom-element id="test-app>
<template>
...
<iron-ajax
auto
url="https://www.googleapis.com/youtube/v3/search"
params="{{ajaxParams}}"
handleAs="json" lastResponse="{{response}}"
method='GET'>
</iron-ajax>
</template>
</dom-module>
脚本
Polymer({
is:"Test-app",
properties: {
qry: {
type: String,
value: 'Cat'
},
key1: {
type: String,
value: 'myapikey'
},
part1: {
type: String,
value: 'snippet'
},
maxResults1: {
type: Number,
value: 10
},
ajaxParams: {
type: String,
computed: 'processParams(part1, qry, maxResults1, key1)'
}
},
processParams: function(part1, qry, maxResults1, key1){
var param = JSON.stringify({part: part1, q:qry, maxResults: maxResults1, key:key1});
console.log(param);
return param;
}
});
</script>
我在控制台中以 JSON 字符串的形式获得了正确的登录信息,但是当返回此值时,该值是按字面意义获取的(与上面提供的 link 中所述的问题相同)并且不是它的价值。
我在控制台中收到错误请求代码 400。非常感谢任何帮助。
属性 params
的类型是 Object
。与链接示例不同,您可以 return 一个本地对象。
processParams: function(part1, qry, maxResults1, key1) {
return {
part: part1,
q: qry,
maxResults: maxResults1,
key:key1
};
}
<template is="dom-bind" id="app">
<iron-ajax auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="[[ajaxResponse.items]]">
<div class="horizontal-section">
<h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2>
<iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
<p>[[item.snippet.description]]</p>
</div>
</template>
<script>
var app = document.querySelector('#app');
app.url = function (videoId) {
return 'https://www.youtube.com/watch?v=' + videoId;
};
</script>
对不起。 ajax 查询 returns json Youtube 视频数组,参数列在 属性 "params" 中。绑定“[[ajaxResponse.items]]”的一种方式将响应绑定到重复模板 "dom-repeat"。 url 函数只是将 videoId 附加到各个链接。我直接从聚合物入门套件
随附的 iron-ajax 演示中复制了代码