聚合物2.0:通知并反映给属性 [英] Polymer 2.0: Notify and reflect to attribute

问题描述

我是这个框架的新手，很乐意看到一些有用和简单的通知和反映正在使用的属性属性的示例. 请保持示例简单，或对您提供的任何代码添加说明.

I'm new to this framework and would love to see some useful and simple examples of notify and reflect to attribute properties being put to use. Please keep the examples simple or add explanation for whatever code you provide.

推荐答案

通知:

可以设置为True | False.假设您有parent-element和child-element.工作示例

can be set to True|False. Let's say you have parent-element and child-element. Working example

parent-element.html:

parent-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>

如您所见，我们有1个名为test的属性，该属性传播到子元素，我们可以在其中使用它进行操作.

As you can see, we have 1 property called test which is propagated to child element, where we can manipulate with it.

child-element.html:

child-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>

什么是羽化?在子元素中，我们定义了test属性，并且此属性绑定到了paper-input，这意味着，每当我们在paper-input中编写内容时，该属性就会自动更新.太棒了，我们不需要照顾child-element中的属性更新，但是父母如何知道属性test已更改?好吧，他不能.

What is hapenning? In child element we defined test property and this property is binded to paper-input, which means, whenever we write something in paper-input, the property updates itself automatically . YEE that's awesome, we don't need to take care of updating property inside child-element, but HOW can parent know that property test has changed? Well, he can't.

然后是notify: true.如果进行了设置，则不必担心通知parent-element child-element，test属性内部的某个位置已被更改.

And here comes notify: true. If you set it up, you don't have to care about notifying parent-element that somewhere inside of the child-element, test property has been changed.

很快，parent-element和child-element中的属性test将同时更新

Shortly, property test in parent-element and child-element will updates simultaneously

反映属性:

顾名思义，将其设置为某些属性时，其值将在宿主元素的属性中可见.最好在一些示例中显示出来.

As name already says, when you set this to some property, it's value will be visible in attribute of host element. Better to show this on some example.

在Polymer中，我们知道为某些元素的属性设置一些绑定需要使用$符号.

In Polymer we know, that setting some binding to attribute of some element needs $ sign.

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

嗯，这不能在任何地方使用.假设我们在custom-elem中需要foo-attribute.

Well, this can't be used everywhere. Let's say, that we need foo-attribute inside custom-elem.

由于foo-attribute被声明为属性而非属性，因此其值在元素内部不可见.因此，我们需要一些属性来表示属性和属性.

Becuase foo-attribute was declared as attribute and not property, it's value won't be visible inside of element. So we need something where some attribute will represent attribute and also property.

因此，一些具有实际情况的工作示例将是:

So some working example, with some real situation would be like:

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

In this case, CSS won't work, because foo is property (not an attribute) and CSS is applied on attributes only.

要使其正常工作，我们必须在child-element内foo属性上添加reflectToAttribute.

To make it work, we have to add reflectToAttribute on foo property inside 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，我们将能够在child-element

After this, foo will become attribute and also property. At this moment, CSS will be applied on child-element and we will be able to work with value of foo inside child-element

这篇关于聚合物2.0:通知并反映给属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！