Question

我有一个聚合物应用程序，它有一些嵌套组件。我试图在各个组件之间共享属性值。我的想法是我可以通过数据绑定来做到这一点。但是，我的尝试失败了，这可以在Plunkr中看到。相关代码（我认为）在这里：

  <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值一样。正如Plunkr所示，我已完成以下操作：

在每个视图中创建一个名为isEnabled的属性（＆＃34; view-1.html＆＃34;＆＃34; view-2.html＆＃34;）。
在托管组件中创建了一个名为isEnabled的属性（＆＃34; shell.html＆＃34;）
通过{{ }}大括号语法使用双向绑定。

我做错了什么？为什么在一个视图中设置的isEnabled值不会传播给另一个？

谢谢！

Answer 1

您应该在视图中notify属性的定义中将true设置为isEnabled。这是双向数据绑定（docs）所必需的。

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属性执行相同的操作。

这是你的plunkr工作双向数据绑定：

http://plnkr.co/edit/YhjE02O14YGCErXu9Vtq

希望它对你有所帮助。

聚合物中各组分的双向结合

2 个答案: