Polymer 1.0 Auto binding template with iron-ajax

Question

我正在尝试通过 iron-ajax 在我的 index.html 中使用以下内容请求服务：

<body class="fullbleed">
    <template is="dom-bind" id="mainTemplate">
        <paper-material class="todo" elevation="1">
            <span>Mohammed</span>
        </paper-material>
        <br/>
        <iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
        <span>{{data.geonames.0.countryName}}</span>
        <br/>
        <span>{{data.geonames.0.name}}</span>
    </template>
    <p id="geolocation">Finding geolocation...</p>
</body>

在我的 JS 代码中，我想读取 {{data}} 但无法读取。我尝试使用以下方法来做到这一点：

<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>

当我记录 {{data}} 时，代码给了我未定义的信息。

Answer 1

这应该有效：

<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>

正如 Dogs 指出的那样，data 属性不属于 requestGeoname 元素，它属于与 [= 绑定的 "template" 项14=]。 Dogs 解决方案也应该有效，但如果您有其他变量要在您的应用程序中使用，这可能是更好的解决方案，因为它们现在可以通过 template-object 访问。例如：

...
template.myOthervariable = "derpherp";
...

Answer 2

您必须等到请求完成。最好使用事件 response（更多信息：https://elements.polymer-project.org/elements/iron-ajax#response）。

<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
    console.log(event.detail.response)
});
</script>

或声明式：

<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
    console.log(event.detail.response);
};
</script>

<iron-ajax … on-response="onPlacesResponse"

Polymer 1.0 Auto binding template with iron-ajax

Polymer 1.0 Auto binding template with iron-ajax

data-binding

ajax

polymer-1.0