聚合物 - 在元素內加載核心ajax

Question

在聚合物網站上檢查core-ajax使用后 ，我決定在我的元素/小部件中使用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

三個主要問題：

1. core-ajax必須進入模板內部，因此它是每個實例的DOM的一部分（這就是未定義ajax原因）。
2. 你需要core-ajax上的auto屬性（否則，你必須在core-ajax上調用go()方法來發送請求）。
3. 您的事件處理程序使用this方法，但未綁定到元素范圍。 建議您使用事件委派而不是addEventListener 。

請參閱下面的新示例。 我做的其他（不太重要的）調整：

1. 從core-ajax刪除id，我們不再需要引用它了。
2. 刪除了polymer.html導入， core-ajax已經導入了它。
3. 將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>