Polymer中的数据绑定如何工作？

Question

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="new-tag">
    <template>
        <input id="input" value="{{value}}" type="text" />
    </template>
    <script>
        (function () {
            Polymer("new-tag", {
                value: ""
            });
        })();
    </script>
</polymer-element>

如果我更改valueDOM对象的属性(在JS中),我可以看到文本字段的值发生了变化.如果我更改文本字段值,DOM对象属性value也会更改.

但这两个变化都不会影响value属性.

如果value属性没有改变,那么模型中的变化如何反映在视图中？

我当时认为这value={{value}}是一种说法"当value财产改变时,改变value属性,反之亦然".但如果value属性不是视图和模型之间的链接,那么更改是如何传播的？

究竟value={{value}}是什么意思呢？

Answer 1

现在,选择将属性值反映回属性.文档正在更新以反映这一点.要获得此行为,attributes请polymer-element使用publish调用中的属性,而不是使用标记上的属性Polymer(),如下所示:

Polymer({
  publish: {
    // won't reflect to an attribute
    bigText: '',
    // will reflect to an attribute
    active: {value: false, reflect: true}
  },
  ...
)};

Answer 2

您看不到{{value}}输入value属性上的绑定（例如 ）发生变化，因为 Polymer 需要在该属性上建立双向绑定。如果将其替换为实际值，则该值将不再受数据绑定。

Polymer 文档中有一个完整的部分介绍“数据绑定的工作原理”： http://www.polymer-project.org/docs/polymer/databinding-advanced.html#how-data-binding-works

我认为这是“当属性更改时，更改属性，反之亦然”value={{value}}的一种说法。valuevalue

在底层，Polymer 使用该Node.bind() 库将元素的属性更改绑定到数据。输入特别支持其value和checked属性上的 2 路数据绑定：

http://www.polymer-project.org/docs/polymer/binding-types.html#binding-to-input-values http://www.polymer-project.org/docs/polymer/node_bind.html