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

Question

我熟悉带有大括号的绑定，例如来自 Polymer 0.5 的 {{variable}}。

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

现在 {{variable}} 是指不同的东西，还是相同而 [[variable]] 只是一个加法？ 在 Polymer 中绑定到 [[variable]] 和 {{variable}} 有什么区别？

Answer 1

正如您所注意到的，现在有两种不同的数据绑定语法，它们具有不同的目的：

{{variable}} 表示您希望 Polymer 自动检测绑定应该是单向还是双向.
[[variable]] 表示您希望绑定到单向 .

为什么要改变？

Polymer 1.x 与旧版本的不同之处在于 绑定现在默认是单向的，与 0.5 非常不同，后者始终是双向的。

换句话说，如果你写

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

然后默认情况下，当

myVariable 已更改，Polymer 更新绑定，从而更新 my-element 的 someProperty.
某些属性已更改，Polymer 不会将绑定更新为 myVariable。

情况总是如此除非你在my-element:

里面的属性设置了notify:true

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

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

myVariable 已更改，Polymer 将绑定更新为 someProperty。
某些属性已更改，Polymer 也将绑定更新为myVariable。

这个行为（当使用 notify: true 时）在 0.5 中是默认的；现在你必须明确要求它。

何时使用 [[变量]]

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

假设您在一个大型项目中工作，并且您知道根据数据在特定 page/element 中的流动方式，某个属性不应该被绑定到的元素改变，例如在功能上用作标签的元素的情况下：

<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 也格式化或以其他方式修改给定的数据，并将其推回可能绑定到它的任何其他元素。 You/they 编辑 display-data 为：

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

这适用于所有需要此功能的页面。但是在前面提到的页面上，这不是故意的，最终导致 data-editor 看到的数据乱码！

这个问题本来可以避免的：

开发团队更好地沟通并且更加考虑元素的使用位置，
and/or [[data]] 在有问题的 page/element 中被用来代替 {{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，请使用 [[变量]]。通过这种方式，您可以强制执行数据在 element/page/application.
只要您知道绑定必须是双向的[=131]，就使用{{variable}} =].

根据the documentation,

To make your code more easier to read, you may want to use the [[property]] form by default, and only use {{property}} for two-way bindings.

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

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

What's the difference between binding to [[var]] and {{var}} in Polymer 1.x?

data-binding

2-way-object-databinding

polymer

polymer-1.0

为什么要改变？

何时使用 [[变量]]