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

【问题标题】：How does data-binding in Polymer work?Polymer 中的数据绑定如何工作？
【发布时间】：2014-05-25 23:51:58
【问题描述】：

<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 对象（在 JS 中）的 value 属性，我可以看到文本字段的值发生了变化。如果我更改文本字段值，则 DOM 对象属性 value 也会更改。

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

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

我在想value={{value}} 是一种说法，即“当value 属性更改时，更改value 属性，反之亦然”。但是如果value 属性不是视图和模型之间的链接，那么这些更改是如何传播的？

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

【问题讨论】：

标签： polymer

【解决方案1】：

将属性值反射回属性is now opt-in。文档正在更新以反映这一点。要获得这种行为，不要在 polymer-element 标记上使用 attributes 属性，而是在调用 Polymer() 时使用 publish 属性，如下所示：

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

【讨论】：

【解决方案2】：

在 Polymer 1.0 中，two ways data binding 用于原生元素或一般的非 Polymer 元素。您需要按照以下说明指定事件::input：

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

只要用户在文本框中键入内容，modelvalue 属性就会更新。因此，元素属性值和属性值是同步的。

代码 sn-p

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

<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>

【讨论】：

【解决方案3】：

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

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

我在想value={{value}} 是一种表达方式：“当value 属性更改时，更改value 属性，反之亦然”。

在底层，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

【讨论】：

谢谢@ebidel。但我的问题是，当我更改 new-tag 元素的 value 属性时，DOM 中的哪些更改以使输入字段获取我输入的新文本？当我更改 Polymer 元素的 value 属性时，Polymer 如何知道它必须设置 input_field.value = <new_value>。同样，当我通过键入更改输入字段中的文本时，它会更改输入字段的value 属性，但是这种更改如何传播到 Polymer 元素的value 属性？
正如 Eric 所说，<input>（又名 HTMLInputElement.prototype.bind()`）上的 Node.prototype.bind() 实现可以完成您所询问的所有工作。
Link-rot 已经吃掉了所有三个链接。

【解决方案4】：

非聚合元素（基本的 html 标签）需要告诉聚合它们何时会通过事件名称更新值。所以 value={{value::eventname}} 对于文本输入 ->

value={{value::input}}

【讨论】：