对聚合物公布的属性感到困惑

Question

我已经挖掘了聚合物的ajax核心元素,代码如下工作正常:

<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}}的值,所以我认为我对如何理解已发布的属性有什么不对,有什么帮助吗？THK.

Answer 1

我知道你说你弄清楚了,但是对于其他人来到这个页面寻找一个完整的解决方案和解释,这里是.

如果您想要数据绑定而不必创建自定义元素,则必须将代码放入模板中,并将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