Question

在聚合物网站上检查core-ajax usage后，我决定在我的元素/小部件中使用core-ajax添加ajax功能。

测试view.html

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

<polymer-element name="test-view" attributes="url">
    <core-ajax id="elemAjax" url="{{url}}" handleAs="json"></core-ajax>
    <template>
        <div id="body"></div>
    </template>
    <script>
        Polymer('test-view', {
        ready: function() {
            var ajax = this.$.elemAjax; // this line
            ajax.addEventListener('core-response', function() {
                console.log(this.response);
            });
        }
    });
    </script>
</polymer-element>

不幸的是，我的脚本中的“ajax”变量返回“undefined”。如何使用core-ajax在元素中加载ajax？

方问：聚合物元素中的“id”属性是否只能在聚合物元素内部访问？

Answer 1

三个主要问题：

core-ajax必须放在模板中，因此它是每个实例的DOM的一部分（这就是ajax未定义的原因）。
您需要auto上的core-ajax属性（否则，您必须在go()上调用core-ajax方法发送请求。）
您的事件处理程序使用this但未绑定到元素范围。建议您使用事件委派而不是addEventListener。

请参阅下面的新示例。我做的其他（不太重要的）调整：

从core-ajax删除ID，我们不再需要引用它。
删除polymer.html导入，core-ajax已导入。
将test-view参数移至Polymer()，在导入内定义元素时不需要这样做。

修改示例：

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

<polymer-element name="test-view" attributes="url">
<template>
    <core-ajax auto url="{{url}}" handleAs="json" on-core-response="{{ajaxResponse}}"></core-ajax>
    <div id="body"></div>
</template>
<script>
    Polymer({
        ajaxResponse: function(event, response) {
            console.log(response);
        }
    });
</script>
</polymer-element>

更好的是完全避免事件并将数据绑定到响应数据。例如：

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

<polymer-element name="test-view" attributes="url">
<template>
    <core-ajax auto url="{{url}}" handleAs="json" response="{{response}}"></core-ajax>
    <div id="body"></div>
</template>
<script>
    Polymer({
        responseChanged: function(oldValue) {
            console.log(this.response);
        }
    });
</script>
</polymer-element>

聚合物 - 在元素内加载核心ajax

1 个答案: