javascript - Polymer通过javascript字符串绑定(bind)数据？

Question

我想知道如何执行以下操作:

<polymer-element name="x-foo" attributes="foo">
  <template>
    <div id="content"></div>
  </template>
  <script>
    Polymer('x-foo', {
      foo: true,
      ready: function() {
        this.$.content.insertAdjacentHTML('beforeend', '<x-bar foo="'+this.foo+'"></x-bar>');
      }
    });
  </script>
</polymer-element>

这样this.foo已绑定(bind)数据并更改为 foo如果x-foo，属性将受到影响像这样实现<x-foo foo="{{foo}}"></x-foo> ？

Answer 1

不幸的是没有。如果您没有使用 foo={{foo}}，那么您就没有使用数据绑定(bind)系统。调用 insertAdjacentHTML 的字面结果是:

<div id="content">
  <x-bar foo="true" id="xbar"></x-bar>
</div>

这是静态标记。任何 future 的更改 this.foo 都不会传播到 x-bar，除非您手动更新它:

fooChanged: function() {
  this.$.content.firstElementChild.foo = this.foo;
},
update: function() {
  this.foo = Math.random();
}

但这又带来了另一个不便。一般来说，可以使用自动节点查找来引用x-bar.foo (this.$.xbar)。相反，必须使用 DOM 遍历 (this.$.content.firstElementChild)，因为该元素是在 Polymer 完成设置之后才添加的。