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

polymer - loading core ajax inside an element

提问by Gasim

After checking core-ajax usagein the polymer website I decided to add ajax functionality using core-ajax inside my element/widget.

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

test-view.html

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

Unfortunately, the "ajax" variable in my script returns "undefined". How can I load ajax inside an element using core-ajax?

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

Side Question: Is the "id" attribute inside a polymer element only accessible inside the polymer element?

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

回答by Scott Miles

Three main problems:

三个主要问题：

1. The core-ajaxmust go inside the template, so it's part of each instance's DOM (this is why ajaxwas undefined).
2. You need the autoattribute on the core-ajax(otherwise, you must call the go()method on the core-ajaxto send the request).
3. Your event handler uses thisbut is not bound to the element scope. Suggest you use event delegation instead of addEventListener.

1. 在core-ajax必须在模板中，所以它的一部分的每个实例的DOM的（这就是为什么ajax是不确定的）。
2. 您需要 上的auto属性core-ajax（否则，您必须调用 上的go()方法core-ajax来发送请求）。
3. 您的事件处理程序使用this但未绑定到元素范围。建议您使用事件委托而不是addEventListener.

See the new example below. The other (less important) tweaks I made:

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

1. Remove id from core-ajax, we don't need to reference it anymore.
2. Remove the polymer.htmlimport, core-ajaxalready imports it.
3. Remove the test-viewparameter to Polymer(), it's not necessary when defining an element inside an import.

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

Modified example:

修改示例：

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

Even better is to avoid events altogether and data-bind directly to the response data. Example:

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

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