我是这个框架的新手,并希望看到一些有用且简单的通知和反映属性属性的示例。 请保持示例简单或为您提供的任何代码添加说明。
答案 0 :(得分:5)
通知:
可以设置为True | False。我们假设你有parent-element
和child-element
。工作实例
父 - element.html:
<dom-module id="parent-element">
<template>
<child-element foo="{{test}}"></child-element>
</template>
<script>
Polymer({
is: "parent-element",
properties: {
test: {
value: "bar"
}
}
})
</script>
</dom-module>
正如您所看到的,我们有一个名为test
的属性,它传播到子元素,我们可以在其中进行操作。
子-element.html:
<dom-module id="child-element">
<template>
<paper-input value="{{test}}"></paper-input>
</template>
<script>
Polymer({
is: 'child-element',
properties: {
test: {
}
},
});
</script>
</dom-module>
什么是hapenning?在子元素中,我们定义了test
属性,此属性绑定到paper-input
,这意味着,只要我们在paper-input
中写入内容,该属性就会自动更新。 YEE非常棒,我们不需要在child-element
内更新属性,但父母如何知道属性test
已经改变了?好吧,他不能。
来了notify: true
。如果您进行了设置,则不必关心通知parent-element
child-element
,test
属性中的某个位置已被更改。
很快,test
和parent-element
中的媒体child-element
会同时更新
<强>反映到属性:强>
正如名称所说,当你将它设置为某个属性时,它的值将在host元素的属性中可见。最好在一些例子中表明这一点。
在Polymer
我们知道,设置某些元素属性的绑定需要$
符号。
<custom-elem foo-attribute$="[[someProperty]]"></custom-elem>
嗯,这无处不在。让我们说,foo-attribute
内需要custom-elem
。
因为foo-attribute
被声明为属性而非属性,它的值在元素内部不可见。所以我们需要一些属性代表属性和属性的东西。
所以一些实际的例子,有一些真实情况就像:
<dom-module id='parent-element'>
<template>
<style>
child-elemet[foo='bar'] {background-color: green}
child-element[foo='foo'] {background-color: red}
</style>
<child-element foo="{{test}}"></child-element>
</template>
<script>
Polymer({
is: "parent-element",
properties: {
test: {
value: "bar"
}
}
})
</script>
</dom-module>
在这种情况下,CSS不起作用,因为foo
是属性(不是属性),CSS仅应用于属性。
为了使其有效,我们必须在reflectToAttribute
内的foo
属性上添加child-element
。
<dom-module id='child-element'>
<template>
<div>[[foo]]</div>
</template>
<script>
Polymer({
is: "child-element",
properties: {
foo: {
reflectToAttribute: true
}
}
})
</script>
</dom-module>
在此之后,foo
将成为属性和属性。目前,CSS将应用于child-element
,我们将能够在foo
child-element
的值
答案 1 :(得分:2)
来自文档:https://www.polymer-project.org/1.0/docs/devguide/data-binding
要绑定到属性,请在属性后添加美元符号($) 名:
<div style$="color: {{myColor}};">
双向绑定 ...属性必须设置为notify:true。