理解Polymer中的双向数据绑定

Question

我是聚合物的新手，我一直在阅读文档并稍微讨论一下，但是我很难理解[[]]单向数据流与之间的区别。 {{}}双向数据流。

任何人都可以帮我理解差异吗？

Answer 1

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

下面我添加了两个代码示例。
第一个示例说明了两个元素之间的 one-away-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>