2014-09-25 3 views
1

Например, если у меня есть следующий код в авто-связывающий шаблон внутри моей index.html файла:Как получить доступ к данным ответа ядра-ajax через javascript?

index.html

<template is="auto-binding"> 
    <core-ajax id="ds" auto url="url/to/data.json" response="{{data}}"></core-ajax> 
    <my-items items="{{data}}"></my-items> 
</template> 

app.js

(function(document) { 
    'use strict'; 

    document.addEventListener('polymer-ready', function() { 
     var responseData = ???? 
    }); 
})(wrap(document)); 
+0

это в полимерном элементе или только в главном файле html? что вы планируете делать с ответом, используйте его в html или javascript? –

+0

Код указан в основном файле HTML, внутри шаблона автоматической привязки. Я планирую использовать данные с javascript/jquery. –

ответ

2

Обычно мы используем привязку данных к core-ajax, но если вам нужно получить его с помощью JS, вы можете либо получить ответ из core-response, что core-ajax пожаров, или вы можете посмотреть свойство response самого тега core-ajax. jsbin example

<core-ajax auto url="http://date.jsontest.com"></core-ajax> 

<script> 
    document.addEventListener('polymer-ready', function() { 
    var ajax = document.querySelector('core-ajax'); 
    ajax.addEventListener('core-response', function(e) { 
     console.log(e.detail.response); 
     // or 
     console.log(e.target.response); 
     // or 
     console.log(ajax.response); 
    }); 
    }); 
</script> 

редактировать: OP хочет получить в ядре-Аяксе элемента внутри отдельного файл связывания шаблона

Вы должны слушать для template-bound события, запущенного с помощью auto-binding шаблона, когда он штампы его содержимого в стр. Затем вы можете querySelector за core-ajax. jsbin example

<template is="auto-binding"> 
    <core-ajax auto url="http://date.jsontest.com"></core-ajax> 
</template> 

<script> 
    var tmpl = document.querySelector('template'); 
    tmpl.addEventListener('template-bound', function() { 
    var ajax = document.querySelector('core-ajax'); 
    ajax.addEventListener('core-response', function(e) { 
     console.log(e.detail.response); 
     // or 
     console.log(e.target.response); 
     // or 
     console.log(ajax.response); 
    }); 
    }); 
</script> 

редактировать: Для того, чтобы показать более хороший подход

Так как оригинальный плакат был специально спрашивать о получении ответа с помощью JavaScript, я дал полностью JS подход. Вы можете очистить это немного, используя привязки. jsbin example

<template is="auto-binding"> 
    <core-ajax auto 
      response="{{data}}" 
      on-core-response="{{ajaxHandler}}" 
      url="http://date.jsontest.com" 
      handleAs="json"></core-ajax> 
    <h1>{{data.date}}: {{data.time}}</h1> 
</template> 

<script> 
    addEventListener('template-bound', function(e) { 
    // do something else with response 
    e.target.ajaxHandler = function(event) { 
     console.log(event.target.response); 
    } 
    }); 
</script> 
+1

Uncaught TypeError: Не удается прочитать свойство addEventListener из null –

+0

попытаться получить core-ajax по id var ajax = document.querySelector ("# ds"); –

+0

ajax по-прежнему null :( –

Смежные вопросы