Polymer 1.0 iron-ajax 调用已发出，但未触发响应且数据未绑定

Question

我有以下代码

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html" />


<dom-module id="custom-Element">
    <iron-ajax auto
               url="http://api.openweathermap.org/data/2.5/forecast"
               params='{"q":"California"}'
               handle-as="json"
               on-response="handleResponse"
               last-response="{{ajaxResponse}}"></iron-ajax>
    <span>{{ajaxResponse.city.name}}</span>
    <script>
        Polymer({
            is: 'custom-Element',
            handleResponse: function ()
            {
                console.log('  blalba');
            },
            ready: function () {
                setInterval(function () { console.log(this.ajaxResponse); }, 1000);

            }
        });
    </script>
</dom-module>

我的问题是，即使 ajax 调用正在进行并且数据已检索，响应中的 "handleResponse" 方法从未被触发并且 "ajaxResponse" 也没有被填充.我尝试查看不同的教程和代码演示，但我似乎无法找到我的代码有什么问题。

Answer 1

当使用 <dom-module 时，熨斗-ajax 或其他任何东西都需要放入 <template 中，因为它位于阴影 dom 中。

例如

<dom-module id="custom-Element">
    <template>
    <iron-ajax auto ..... >
    <span>{{ajaxResponse.city.name}}</span>
    </template>
..
...
.....
</dom-module>

我再解释一下。

因为您正在创建一个 dom-模块 custom-Element 并且您使用 <custom-Element></custom-element> 调用它以显示数据 dom-module 中的任何内容都需要在 <template></template> 所以它被放置在影子 dom 中并注册了 id 名称 custom-Element.

想想 html5 <video> 标签

现在

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

它将播放视频。

然而，当您检查 <video> 时，您看不到任何特殊的 css，例如播放/停止暂停按钮或任何 javascript，因为它位于阴影中 Dom浏览器及其隐藏。

所以 video 标签只是在浏览器中构建的一个名称，因此您可以使用它来播放视频。要将其置于阴影 dom 中，您需要一个 <template>

对于聚合物，您也可以这样做

<dom-module id="any-name">

<template>
...
</template>

</dom-module>

并使用它

<any-name></any-name>

与 html5 中的 <video></video> 标签相同。

阅读此处的好文章，了解 web components 以及使用模板的原因

Polymer 1.0 iron-ajax 调用已发出，但未触发响应且数据未绑定

Polymer 1.0 iron-ajax call is made but on-response does not fire and the data isn't bound

polymer-1.0