Polymer 2.0：通知并反映属性

概述我是这个框架的新手,很想看到一些有用而简单的通知和反映属性属性的例子. 请保持示例简单或为您提供的任何代码添加说明. 通知： 可以设置为True | False.假设你有parent-element和child-element.工作实例 父母element.html： <dom-module id="parent-element"> <template> <child-element 我是这个框架的新手,很想看到一些有用而简单的通知和反映属性属性的例子.
请保持示例简单或为您提供的任何代码添加说明.解决方法 通知：

可以设置为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-@R_301_5983@ value="{{test}}"></paper-@R_301_5983@>  </template>  <script>    polymer({      is: 'child-element',propertIEs: {        test: {        }      },});  </script></dom-module>

什么是hapenning？在子元素中,我们定义了测试属性,并且此属性绑定到纸张输入,这意味着,每当我们在纸张输入中写入内容时,属性会自动更新. YEE很棒,我们不需要处理更新子元素内的属性,但父母如何知道属性测试已经改变了？好吧,他不能.

这里来了通知：是的.如果你设置它,你不必关心通知parent-element在child-element,test属性的某个地方已被更改.

不久,parent-element和child-element中的属性测试将同时更新

反映到属性：

如名称所示,当您将其设置为某个属性时,它的值将在host元素的属性中可见.最好在一些例子中展示这一点.

在polymer我们知道,设置一些绑定到某个元素的属性需要$sign.

<custom-elem foo-attribute$="[[someProperty]]"></custom-elem>

好吧,这无处不在.让我们说,我们需要在custom-elem中使用foo-attribute.

因为becuase 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仅应用于属性.

为了使它工作,我们必须在child-element内的foo属性上添加reflectToAttribute.

<dom-module ID='child-element'>  <template>    <div>[[foo]]</div>  </template>  <script>    polymer({      is: "child-element",propertIEs: {        foo: {          reflectToAttribute: true        }      }    })  </script></dom-module>

在此之后,foo将成为属性和属性.此时,CSS将应用于子元素,我们将能够在子元素内处理foo的值

总结

以上是内存溢出为你收集整理的Polymer 2.0：通知并反映属性全部内容，希望文章能够帮你解决Polymer 2.0：通知并反映属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。