我熟悉{{variable}}
Polymer 0.5 中带有花括号的绑定,例如 .
但是,在 Polymer 发行版的示例和代码片段中,我已经开始注意到带有方括号的绑定,例如[[variable]]
, 。
{{variable}}
现在意味着不同的东西,还是相同的东西[[variable]]
只是一个补充?[[variable]]
绑定到 Polymer和绑定到 Polymer 有什么区别{{variable}}
?
我熟悉{{variable}}
Polymer 0.5 中带有花括号的绑定,例如 .
但是,在 Polymer 发行版的示例和代码片段中,我已经开始注意到带有方括号的绑定,例如[[variable]]
, 。
{{variable}}
现在意味着不同的东西,还是相同的东西[[variable]]
只是一个补充?[[variable]]
绑定到 Polymer和绑定到 Polymer 有什么区别{{variable}}
?
正如您所注意到的,现在有两种不同的数据绑定语法,它们有不同的用途:
Polymer 1.x 与旧版本的不同之处在于,绑定现在默认是单向的,与 0.5 不同,它们总是双向的。
换句话说,如果你写
<my-element some-property="{{myVariable}}"></my-element>
那么默认情况下,当
my-element
.someProperty
myVariable
.除非您notify:true
在里面的属性上设置,否则情况总是如此my-element
:
Polymer({
is: 'my-element',
properties: {
someProperty: {
notify: true,
...
有了notify: true
,绑定现在是双向的,所以当
someProperty
.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}}
相关页面/元素。和
<display-data source-data="[[data]]"></display-data>
...
<data-editor source-data="{{data}}"></data-editor>
data-editor
可以更改data
,但display-data
只能读取,并且在更改其属性data
的值时无法更改其值,即使设置为 on 也是如此。sourceData
notify: true
sourceData
因此,它可能是一个好主意:
variable
. 这样,您可以强制数据在元素/页面/应用程序中流动的方向。根据文件,
为了使您的代码更易于阅读,您可能希望默认使用[[property]]形式,并且仅将{{property}}用于双向绑定。
然而,话虽如此,它最终归结为一个选择问题。如果您想放弃使用[[variable]]
,没有人会阻止您,您也不会引发任何火灾。