Polymer 2.0:通知并反映到属性

时间:2017-04-10 19:21:35

标签: polymer web-component

我是这个框架的新手,并希望看到一些有用且简单的通知和反映属性属性的示例。 请保持示例简单或为您提供的任何代码添加说明。

2 个答案:

答案 0 :(得分:5)

通知:

可以设置为True | False。我们假设你有parent-elementchild-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-elementtest属性中的某个位置已被更改。

很快,testparent-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。