聚合物中组分的双向结合

Question

我有一个聚合物应用程序，它有一些嵌套组件。我试图在各个组件之间共享一个属性值。我的想法是我可以通过数据绑定来完成这个任务。但是，我的尝试失败了，这可以在这个普朗克中看到。有关的守则(我认为)在这里：

  <neon-animated-pages selected="[[selectedPageIndex]]" style="height:100%;">
    <view-1 is-enabled="{{ isEnabled }}"></view-1>
    <view-2 is-enabled="{{ isEnabled }}"></view-2>
  </neon-animated-pages>

每个视图都有一个paper-toggle-button。如果在一个视图中设置了切换按钮，我希望该值出现在另一个视图中。然而，事实并非如此。就像每个视图都在使用自己的isEnabled值一样。正如普朗克所显示的，我做了以下工作：

1. 在每个视图中创建一个名为isEnabled的属性("view-1.html“和"view-2.html")。
2. 在宿主组件("shell.html")中创建一个名为shell.html的属性
3. 通过{{ }}大括号语法使用双向绑定。

我做错了什么？为什么在一个视图中设置的isEnabled值与另一个视图不一致？

谢谢!

Answer 1

应该在视图中的notify属性定义中将isEnabled设置为isEnabled。这是双向数据绑定(文档)所需要的.

Answer 2

首先:将元素文件命名为元素的命名方式。将目录中的shell更改为app-shell。

第二:用户Maria说，只需将一个notify: true属性声明到您希望能够进行数据库的每个元素，如下所示：

<dom-module id="view-1">
  <template>
    <h2>View 1</h2>
    <paper-toggle-button checked="{{ isEnabled }}">Is Enabled?</paper-toggle-button>
  </template>

  <script>
    Polymer({
      is: 'view-1',
      properties: {
        isEnabled: {
          type: Boolean,
          value: false,
          notify: true
        }
      }
    });
  </script>
</dom-module>

对view-2属性也执行同样的操作。

下面是使用双向数据绑定的柱塞：

http://plnkr.co/edit/YhjE02O14YGCErXu9Vtq

希望它能帮到你。