在Polymer 1.x中绑定到[[var]]和{{var}}之间的区别是什么？

Question

我熟悉来自Polymer 0.5的花括号（如{{variable}}）的绑定。

但是，在发布版本的Polymer的示例和代码片段中，我已经开始注意到使用方括号的绑定，例如[[variable]]。

{{variable}}现在意味着什么不同，或者它是否相同而[[variable]]只是一个补充？ 在Polymer中绑定到[[variable]]和{{variable}}之间的区别是什么？

Answer 1

就像你已经注意到的那样，现在有两种不同的数据绑定语法，它们有不同的用途：

• {{variable}} 表示您希望Polymer自动检测绑定是否应该单向或双向。
• [[变量]] 表示您希望绑定到仅限单向。

为什么要改变？

Polymer 1.x与旧版本的不同之处在于绑定现在默认为单向，与0.5完全不同，它们始终是双向的。

换句话说，如果你写

<my-element some-property="{{myVariable}}"></my-element>

然后默认情况下，

时

• myVariable已更改，Polymer会更新绑定，从而更新my-element＆＃39; someProperty。
• someProperty已更改，Polymer 更新绑定至myVariable。

除非在notify:true内的属性上设置my-element，否则总是如此

Polymer({
  is: 'my-element',
  properties: {
    someProperty: {
      notify: true,
      ...

使用notify: true，绑定现在是双向的，所以当

时

• myVariable已更改，Polymer将绑定更新为someProperty。
• someProperty已更改，Polymer 也将绑定更新为myVariable。

此行为（使用notify: true时）曾经默认为0.5;现在你必须明确要求它。

何时使用[[变量]]

必须使用[[variable]]没有技术原因，因为Polymer会自动检测绑定是{1}}的单向还是双向。那你为什么要用呢？

我们假设您正在一个大型项目中工作，并且您知道根据数据在特定页面/元素中的流动方式，某个属性永远不会被它所绑定的元素改变，例如在一个功能上用作标签的元素的情况下：

{{variable}}

一切看起来都很棒！ <display-data source-data="{{data}}"></display-data> ... <data-editor source-data="{{data}}"></data-editor> 属性绑定到data元素和display-data元素，并将在它们之间自动共享。 （在此示例中，假设data-editor的唯一目的是预览它所绑定的数据。）

有一天，您或其他人正在编辑display-data，您忘记了上面使用它的情况。对于完全不同的用例，您或其他开发人员希望display-data也可以格式化或以其他方式修改给定的数据，并将其推回到可能绑定到它的任何其他元素。您/他们如此编辑display-data：

• 将display-data添加到notify: true，以允许双向数据绑定。
• 将代码添加到sourceData，修改display-data属性。

这适用于需要此功能的所有页面。但是在前面提到的页面上，这不是故意的，最终会混淆sourceData看到的数据！

在以下情况下可以避免这个问题：

• 开发团队沟通得更好，更考虑到元素的使用位置，
在相关的页面/元素中使用
• 和/或 [[data]] 代替data-editor。

使用

{{data}}

<display-data source-data="[[data]]"></display-data> ... <data-editor source-data="{{data}}"></data-editor> 可以更改data-editor，但data只能阅读display-data，并且在更改时无法更改其值即使在data 上设置了sourceData，其notify: true属性的值 。

因此，它可能是一个好主意：

• 只要您需要绑定到sourceData，请使用 [[变量]] 。这样，您就可以强制执行元素/页面/应用程序中数据流动的方向。
• 只要您知道绑定必须是双向的，请使用 {{variable}} 。

根据the documentation，

  

为了让您的代码更易于阅读，您可能希望默认使用 [[property]] 表单，并仅使用 {{property}} 双向绑定。

然而，据说， 最终归结为一个选择问题。 如果你想放弃variable的使用，没有人会阻止你，你也不会开火。