Javascript 聚合物-在元件内加载芯ajax

在登录polymer网站后，我决定在我的元素/小部件中使用核心ajax添加ajax功能

测试视图.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>

聚合物（“测试视图”{
就绪：函数（）{
var ajax=this.$.elemAjax；//此行
addEventListener（'core-response'，function（））{
console.log（this.response）；
});
}
});

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

附带问题：聚合元素中的“id”属性是否只能在聚合元素中访问？

三个主要问题：

核心ajax

必须放在模板内部，因此它是每个实例DOM的一部分（这就是为什么

ajax

未定义的原因）

您需要

coreajax

上的

auto

属性（否则，您必须调用

coreajax

上的

go（）

方法来发送请求）

事件处理程序使用

此

，但未绑定到元素范围。建议您使用事件委派而不是

addEventListener

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

从

核心ajax

中删除id，我们不再需要引用它

移除

polymer.html

导入，

核心ajax

已经导入了它

将

测试视图

参数删除到

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>

聚合物({
ajaxResponse：函数（事件、响应）{
控制台日志（响应）；
}
});

更好的方法是完全避免事件，数据直接绑定到响应数据。例如：

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

聚合物({
响应更改：函数（旧值）{
console.log（this.response）；
}
});

Re：附带问题，基本上是的。通过聚合模板创建的节点是在ShadowDOM中创建的（默认情况下），因此来自该ShadowDOM外部的查询无法访问这些节点。关于您的“（不太重要）”调整#2：这是否会使他的元素更脆弱？如果他将来从使用核心ajax切换到一些原生web组件解决方案呢？例如，每个元素显式声明其依赖项以帮助进行单元测试，这不是最好的吗？这可能是有争议的。我倾向于在“你不需要调试的代码，就是你不需要编写的代码”这一方面犯错误。我认为删除聚合物导入只是自找麻烦。将其保留为

导入

不会有任何负面影响，如果已经获取了资源，则不要重新请求资源，并且硫化（如果正在这样做）消除了对额外字符的任何担心。但是，排除它会使您在无意中删除依赖项/2%这个答案在聚合物1.0中仍然有效吗？我尝试在自定义元素定义中替换，但似乎无法访问响应变量1.0，

核心ajax

现在是

iron ajax

，

响应

被重命名为

最后一个响应

，

handleAs

必须作为

句柄编写（当用作属性时）。此外，在1.0中，必须通过
属性{response:{observer:'responseChanged'}}
显式准备回调。