polymer-1.0 - 进行了 Polymer 1.0 iron-ajax 调用，但响应未触发且数据未绑定(bind)

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时Iron-ajax 或其他任何东西都需要放入 <template 中因为它被放置在shadow 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> 内所以它被放置在shadow dom中并注册了id名称custom-Element .

想想html5 <video>标签

现在就做

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

它将播放视频。

但是当您检查<video>时你看不到任何特殊的 css，比如播放/停止暂停按钮或任何 javascript，因为它放置在浏览器的 Shadow Dom 中并且隐藏起来。

所以video标记它只是浏览器中构建的名称，以便您可以用来播放视频。要将其放入 Shadow dom 中，您需要 <template>

对于聚合物，你也可以做同样的事情

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

<template>
...
</template>

</dom-module>

并使用它

<any-name></any-name>

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

这里有一篇好文章，值得阅读web components以及为什么使用模板