聚合物通过javascript字符串绑定数据？

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 是数据绑定的，如果x-foo 像<x-foo foo="{{foo}}"></x-foo> 那样实现，对foo 属性的更改将受到影响？

Answer 1

很遗憾没有。如果您没有使用foo={{foo}}，那么您没有使用数据绑定系统。调用insertAdjacentHTML 的字面结果是：

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

这是静态标记。 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 完成设置之后才添加的。