javascript - polymer - 在元素中加载核心 ajax

Question

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

test-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？

附带问题: polymer 元素内的“id”属性是否只能在 polymer 元素内访问？

Answer 1

三个主要问题:

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

请参阅下面的新示例。我所做的其他(不太重要的)调整:

1. 从 core-ajax 中移除 id，我们不再需要引用它。
2. 删除 polymer.html 导入，core-ajax 已经导入它。
3. 移除 Polymer() 的 test-view 参数，在导入中定义元素时不需要。

修改示例:

<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>

更好的方法是完全避免事件并将数据直接绑定(bind)到响应数据。示例:

<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>