запутался в опубликованных атрибутах полимера

Я копаю элемент полимера ajax-core, код, подобный следующему, отлично работает:

<core-ajax url="./ajax-test.txt" auto response="{{resp}}"></core-ajax>
<textarea value="{{resp}}"></textarea>

В этом случае я могу получить значение из {{resp}}. Я покопался в исходном коде core-ajax и выяснил, как это было сделано:

  1. сделать response опубликованным атрибутом, установив attributes="response ..."
  2. передать ответ ajax на this.response

затем я попытался создать свой собственный компонент ajax, но это не сработало, код моего компонента ajax:

Polymer('louis-ajax', {
  url: '',
  response: null,
  ready: function() {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        this.response = xmlhttp.responseText;
      }
    }.bind(this);
    xmlhttp.open("GET",this.url,true);
    xmlhttp.send();
  }
});

и мой код приложения таков:

<louis-ajax url="http://polymer.snspay.cn/api/posts.json" response="{{response}}"></louis-ajax>
<span>We have got the ajax response as</span> : <input type='text' value="{{response}}" />

В результате запрос ajax был успешно выполнен, но значение ввода равно «{{response}}», а не значение {{response}}, поэтому я думаю, что что-то не так в том, как я понимаю работу опубликованных атрибутов. , любая помощь? Тк.


polymer
person Chenglu    schedule 31.07.2014    source источник
comment
Я сам разобрался, код должен быть в теге <template> иначе не подействует. Мой код приложения не находится ни в одном шаблоне.   -  person Chenglu    schedule 31.07.2014

Ответы (1)


arrow_upward
5
arrow_downward

Я знаю, вы сказали, что разобрались, но для тех, кто заходит на эту страницу в поисках полностью работающего решения и объяснения, вот оно.

Если вы хотите привязать данные без необходимости создавать настраиваемый элемент, вы должны поместить свой код в шаблон с атрибутом is, установленным на auto-binding:

<template is="auto-binding">
  <core-ajax url="./ajax-test.txt" auto response="{{resp}}"></core-ajax>
  <textarea value="{{resp}}"></textarea>
</template>

Без этого Polymer не будет знать, что ему нужно подключить привязки в вашем html, и такие вещи, как {{resp}}, будут рассматриваться как текст.

Более подробное объяснение можно найти здесь: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

person willurd    schedule 31.07.2014