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

Question

我熟悉大括号的绑定,比如{{variable}}Polymer 0.5.

但是,在Polymer的发布版本的示例和代码片段中,我开始注意到带有方括号的绑定,例如[[variable]].

难道{{variable}}现在的意思是不同的东西,或者是相同的,[[variable]]仅仅是一个加法？绑定到聚合物[[variable]]和{{variable}}聚合物之间有什么区别？

Answer 1

正如您已经注意到的,现在有两种不同的数据绑定语法,它们有不同的用途:

• {{variable}}表示您希望Polymer自动检测绑定是单向还是双向.
• [[variable]]表示您希望绑定仅限单向.

为什么要改变？

Polymer 1.x与旧版本的不同之处在于,默认情况下绑定现在是单向的,与0.5不同,它们总是双向的.

换句话说,如果你写

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

那么默认情况下,何时

• MYVARIABLE被改变,聚合物更新绑定,并且因此更新my-element的someProperty.
• someProperty改变,聚合物也没有更新的结合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会自动检测绑定是单向还是双向{{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-editor看到的数据!

如果有这样的问题就可以避免:

• 开发团队沟通得更好,更考虑到元素的使用位置,
• 和/或[[data]]代替{{data}}在所讨论的页面/元素中使用.

同

<display-data source-data="[[data]]"></display-data>
...
<data-editor source-data="{{data}}"></data-editor>

data-editor可以更改data,但display-data只能读取data,并且在更改其sourceData属性值时将无法更改其值,即使notify: true设置为on也是如此sourceData.

因此,它可能是一个好主意:

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

根据文件,

为了使代码更易于阅读,您可能希望默认使用[[property]]表单,并仅使用{{property}}进行双向绑定.

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