聚合物 Iron-ajax 数据绑定示例不起作用答案

【问题标题】：Polymer iron-ajax data binding example not working聚合物 Iron-ajax 数据绑定示例不起作用
【发布时间】：2015-08-18 03:16:29
【问题描述】：

我在 Polymer 1.0.2 中遇到了 Iron-ajax 和数据绑定问题。即使是稍加改动的example from the Polymer documentation 也不起作用。

这是我的更改代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../../bower_components/polymer/polymer.html">
    <link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">

</head>
<body>

<template is="dom-bind">

    <iron-ajax
            auto
            url="http://jsonplaceholder.typicode.com/posts/"
            lastResponse="{{data}}"
            handleAs="json">
    </iron-ajax>

    <template is="dom-repeat" items="{{data}}">
        <div><span>{{item.id}}</span></div>
    </template>

</template>

<script>
    (function (document) {
        'use strict';

        var app = document.querySelector('#app');

        window.addEventListener('WebComponentsReady', function() {
            var ironAjax = document.querySelector('iron-ajax');
            ironAjax.addEventListener('response', function() {
                console.log(ironAjax.lastResponse[0].id);
            });
            ironAjax.generateRequest();
        });

    })(document);

</script>
</body>
</html>

我所做的只是输入一个 URL 以获得真正的 JSON 响应并设置 auto 和 handleAs 属性。我还为响应事件添加了一个带有侦听器的小脚本。侦听器工作正常并处理响应，但 dom-repeat 模板中的跨度未呈现。

我正在使用 Polymer 1.0.2 和铁元素 1.0.0

【问题讨论】：

我遇到了类似的问题，请查看here 我的问题和两个答案（包括我自己的！），看看它们是否有帮助。

标签： ajax polymer

【解决方案1】：

您的文档似乎在示例的lastresponse 属性中缺少- 字符。

您必须将lastResponse 更改为last-response。查看来自 iron-ajax github 页面的 this 示例。

【讨论】：

文档没有遗漏任何内容。 lastResponse 是自定义元素的属性。当属性转换为属性时，camelCase 必须转换为连字符的属性。因此，lastResponse 在用作属性时成为最后响应。
对不起，我拼错了，已编辑。 :) 如果您查看 Emanuel 示例，您会发现他使用的是 lastResponse，应该是 last-response。
谢谢马特奥！那成功了。 Polymer 文档中的示例似乎是错误的。示例中的确切行是<iron-ajax url="http://..." lastresponse="{{data}}"></iron-ajax>
我刚刚找到property name to attribute name mapping 的规则。 Camel case 属性带有破折号的属性。

【解决方案2】：

当你在元素上使用属性时，你必须将驼峰句转换为破折号句，我的意思是：

lastResponse 映射到最后一个响应

Property name to attribute name mapping

【讨论】：