聚合物2.0：通知并反映到属性

我是新来的这个框架，并希望看到一些有用的和简单的例子通知和反映属性属性被投入使用。请保持示例简单或为您提供的任何代码添加解释。聚合物2.0：通知并反映到属性

2017-04-10 abcd_1234

通知：

可以设置为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>

正如你可以看到，我们有1个属性调用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-elementchild-element,test属性已被更改。

不久，物业test在parent-element和child-element将同时更新

反映到属性：

正如名字已经说，当你设置这部分物业，它的价值将是可见主机元素的属性。最好在一些例子中展示这一点。

在Polymer我们知道，设置一些绑定到一些元素的属性需要$符号。

那么，这不能在任何地方使用。比方说，我们需要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被应用在属性只。

要使其正常工作，我们必须在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将在child-element被应用，我们将能够与foo价值在里面工作child-element

来源

2017-04-11 08:07:36

从文档：https://www.polymer-project.org/1.0/docs/devguide/data-binding

绑定到一个属性，添加一个美元符号（$ ）属性名后：

<div style$="color: {{myColor}};">

双向绑定 ...属性必须设置为通知符y：真的。

来源

2017-04-11 21:05:42

聚合物2.0：通知并反映到属性

回答

相关问题