聚合物中的数据绑定是如何工作的？

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>

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

但这两个更改都不影响value属性。

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

我认为value={{value}}是一种表达“当value属性发生变化时，更改value属性，反之亦然”的方式。但是，如果value属性不是视图和模型之间的链接，那么更改是如何传播的？

另外，value={{value}}到底是什么意思？

Answer 1

您不会看到输入的value属性上的绑定(例如，value)发生变化，因为聚合物需要在该属性上建立双向绑定。如果将其替换为实际值，则该值将不再是数据绑定的。

在聚合物文档中有一个关于“数据绑定如何工作”的完整章节：http://www.polymer-project.org/docs/polymer/databinding-advanced.html#how-data-binding-works

我认为value={{value}}是一种表达“当value属性发生变化时，更改value属性，反之亦然”的方式。

在遮罩下，聚合物使用Node.bind()库将元素的属性变化绑定到数据。输入尤其支持在其value和checked属性上进行双向数据绑定：

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

Answer 2

将属性值反射回属性现在被选择加入。文档正在更新以反映这一点。要获得这种行为，不要在attributes标记上使用publish属性，而是在调用Polymer()时使用publish属性，如下所示：

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

Answer 3

在聚合物1.0中有自然元素或一般非聚合物元素的双向数据绑定。您需要指定事件::input，如下所示：

 <input id="input" value="{{modelvalue::input}}" type="text" />

每当用户在文本框中键入某些内容时，都会更新modelvalue属性。因此，元素属性值和属性值是同步的。

代码片段

以下是一个完整的工作和运行示例：

​

​

<base href="http://polygit.org/components/">
<link href="polymer/polymer.html" rel="import">

<dom-module is="new-wc">
    <template>
       
      <input id="input" value="{{modelvalue::input}}" type="text" />
      
      <p>
        Default value is <span>{{modelvalue}}</span>  
      </p>
      
    </template>
    <script>
      Polymer({
         is: "new-wc",

         properties: {
            modelvalue: { type: String, value: "0" }
         }
      });
    </script>
</dom-module>

<p><b>Code snippet description: </b>this polymer code snippet demonstrates how to use the two ways binding for native or non-polymer elements. Just type something within the text box and you will see the typed text updated below.</p>
  
<new-wc></new-wc>

​