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

将属性值反映回属性is now opt-in。文档正在更新以反映这一点。要获得此行为，请在attributes的{{1}}调用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

在Polymer 1.0中，对于原生元素或通常是非聚合物元素，存在two ways data binding。您需要按照以下说明指定事件::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>

Answer 3

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

“高分子文档”中的整个部分＆＃34;数据绑定的工作原理＆＃34;： http://www.polymer-project.org/docs/polymer/databinding-advanced.html#how-data-binding-works

我认为value={{value}}是一种说法＆＃34;当value属性发生变化时，更改value属性，反之亦然＆＃34;。

在幕后，Polymer使用Node.bind()库将元素的属性更改绑定到数据。输入特别支持对value和checked属性的双向数据绑定：

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

Answer 4

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

value={{value::input}}

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

4 个答案: