进行了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

问题描述

我有以下代码

<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".我尝试查看其他教程和代码演示，但似乎找不到我的代码出了什么问题.

My problem is even though the ajax call is happening and data is retrieved the on-response "handleResponse" method is never being fired and the "ajaxResponse" isn't being populated either. I tried looking at different tutorials and code demos but I can't seem to find what's wrong with my code.

推荐答案

在使用<dom-module时，铁质ajax或其他任何东西都需要放入<template内，因为它放置在影子dom中.

When using a <dom-module The iron-ajax or anything else needs to go inside a <template as its placed in the 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>内部，所以将其放置在影子dom中并注册ID名称custom-Element.

Because you are creating a dom-module custom-Element and you are calling it with <custom-Element></custom-element> to display the data anything inside dom-module needs to be inside a <template></template> so its placed in the shadow dom and registers the id name custom-Element.

考虑html5 <video>标记

现在通过

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

它将播放视频.

但是，当您检查<video>时，您看不到任何特殊的CSS，例如播放/停止暂停按钮或任何javascript，因为它位于浏览器的Shadow Dom中并且被隐藏了.

However when you inspect <video> you cant see any special css like for the play /stop pause buttons or any javascript because its placed in the Shadow Dom of the browser and its hidden away.

因此video标记只是在浏览器中建立的名称，因此您可以用来播放视频.要将其放入影子dom，您需要<template>

So the video tag its just a name build in the browser so you can use to play videos. To put that in the shadow dom you need a <template>

使用聚合物也一样

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

<template>
...
</template>

</dom-module>

并使用它

<any-name></any-name>

类似于html5中的<video></video>标记.

same like the <video></video> tag in html5.

这里是阅读网络组件以及为什么使用模板的好文章

Good article here to read about web components and why templates are used

这篇关于进行了Polymer 1.0 iron-ajax调用，但未触发响应并且未绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！