Iron-ajax 数据绑定答案

【问题标题】：Iron-ajax Data bindingIron-ajax 数据绑定
【发布时间】：2015-05-30 18:58:39
【问题描述】：

如何在新的 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 字符串形式获得了正确的日志，但是当返回此值时，该值是按字面意思获取的（与上面提供的链接中所述的问题相同）而不是它的值。

我在控制台中收到错误请求代码 400。非常感谢任何帮助。

【问题讨论】：

标签： polymer

【解决方案1】：

属性params 的类型为Object。与链接示例不同，您可以只返回一个原生对象。

processParams: function(part1, qry, maxResults1, key1) {
    return {
        part: part1,
        q: qry,
        maxResults: maxResults1,
        key:key1
    };
}

【讨论】：

如何使用模板重复响应？
您想迭代响应中的项目列表吗？
是的，你是怎么做到的？？
您需要绑定items。即如果response 包含一个键objects（直接返回列表通常是不好的形式）你会做<template is="dom-repeat" items="[[response.objects]]">。方括号是单向绑定。

【解决方案2】：

 <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 查询返回 Youtube 视频的 json 数组，其参数列在属性“params”中。绑定“[[ajaxResponse.items]]”的一种方式将响应绑定到重复模板“dom-repeat”。 url 函数只是将 videoId 附加到各个链接。我直接从聚合物入门套件附带的 Iron-ajax 演示中复制了代码

【讨论】：

也许可以添加一些关于它的作用的描述？
对不起。 ajax 查询返回 Youtube 视频的 json 数组，其参数列在属性“params”中。绑定“[[ajaxResponse.items]]”的一种方式将响应绑定到重复模板“dom-repeat”。 url 函数只是将 videoId 附加到各个链接。我直接从聚合物入门套件附带的 Iron-ajax 演示中复制了代码