Блог

После проверки использования core-ajax на веб-сайте polymer я решил добавить функциональность ajax, используя core-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». Как я могу загрузить ajax внутри элемента, используя core-ajax?

Побочный вопрос: доступен ли атрибут «id» внутри элемента polymer только внутри элемента polymer?

Три основные проблемы:

1. Он core-ajax должен находиться внутри шаблона, поэтому он является частью DOM каждого экземпляра (вот почему ajax был не определен).
2. Вам нужен auto атрибут для core-ajax (в противном случае вы должны вызвать go() метод core-ajax для отправки запроса).
3. Ваш обработчик событий использует this , но не привязан к области видимости элемента. Предлагаю вам использовать делегирование событий вместо addEventListener .

Смотрите новый пример ниже. Другие (менее важные) настройки, которые я сделал:

1. Удалите идентификатор из core-ajax , нам больше не нужно ссылаться на него.
2. Удалите polymer.html импорт, core-ajax он уже импортирует его.
3. Удалите test-view параметр to 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>