了解 Polymer 中的双向数据绑定

Question

我是 Polymer 的新手，我一直在阅读文档并稍微尝试了一下，但我在理解 [[]] 单向数据流之间的区别时遇到了一些困难，和 {{}} 双向数据流。

谁能帮我理解其中的区别？

Answer 1

例如，将数据从一个元素向下传递到它的子元素之一被认为是单向数据绑定。如果此数据在子元素中被修改，则更改也会反映在父元素中。这是通过双向数据绑定实现的，因为它可以在上下两个方向上进行。

下面我添加了两个代码示例。
第一个示例说明了两个元素之间的 one-away-data-binding。第二个示例显示了 two-way-data-binding，其中父元素反映了其子元素中发生的更改。

请注意，我使用的是 Polymer 1 的语法。但是，我相信 Polymer 2 中处理数据绑定的方式没有改变。

单向数据绑定
父元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../child-element/child-element.html">
<dom-module id="parent-element">
  <template>
    <style>
    </style>
    <div>
      <h1>[[name]]</h1> <!-- This will print Pazzle -->

      <!-- Use the imported child element and bind the name property-->
      <child-element name="[[name]]"></child-element>
      <!-- Will print Pazzle in a h2 element -->

    </div>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
      properties: {
        name: {
          type: String,
          value: 'Pazzle'
        }
      },
    });
  </script>
</dom-module>

父元素的子元素：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="child-element">
  <template>
    <style>
    </style>
    <div>
      <h2>[[name]]</h2> <!-- This will print Pazzle -->
    </div>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      properties: {
        name: {
          type: String,
          value: ''
        }

      },
    });
  </script>
</dom-module>

双向数据绑定
父元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../child-element/child-element.html">
<dom-module id="parent-element">
  <template>
    <style>
    </style>
    <div>
      <!-- Use the imported child element and bind the name property-->
      <child-element name="{{name}}"></child-element>
      <!-- Will print Contis in a h2 element instead of Pazzle -->

    </div>
  </template>
  <script>
    Polymer({
      is: 'parent-element',
      properties: {
        name: {
          type: String,
          value: ''
        }
      },

      ready: function() {
        this.name = "Pazzle";
      }

    });
  </script>
</dom-module>

父元素的子元素：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="child-element">
  <template>
    <style>
    </style>
    <div>
      <h2>[[name]]</h2> <!-- This will print Contis -->
    </div>
  </template>
  <script>
    Polymer({
      is: 'child-element',
      properties: {
        name: {
          type: String,
          value: '',
          notify: true,
          // notify will make it possible to send
          // our changed Name property back up
          observer: 'nameChanged'
        }
      },

      nameChanged: function() {
        if(this.name == 'Pazzle' || this.name == ''){
          this.name = "Contis";
        }
      }

    });
  </script>
</dom-module>

了解 Polymer 中的双向数据绑定

Understanding two-way databinding in Polymer

polymer

polymer-2.x