聚合物：如何在< content>中观察变化性能 [英] Polymer: How to watch for change in <content> properties

问题描述

我刚刚开始学习Polymer。这是我的聚合物元素的通用版本：

 < polymer-element name =my-element> 
< template> 
< style> 
：主机{
位置：绝对; 
 width：200px; 
 height：100px; 
 background-color：green; 
} 
< / style> 
< p>我的元素< / p> 
< content id =先入>< / content> 
< content id =second-in>< / content> 
< / template> 
< script> 
 Polymer（'my-element'，{
 domReady：function（）{
 alert（this.children [0] .getAttribute（'title'））; 
 //这将返回我想要观察的值
} 
}）; 
< / script> 
<聚合物元素> 
  

内容标签都被另一个自定义元素填充（稍微简化）：

 < polymer-element name =in-elementattributes =title> 
< template> 
< style> 
 ... 
< / style> 
< p> {{title}}< / p> 
< / template> 
< script> 
 Polymer（'in-element'，{
 title：'me'
}）; 
< / script> 
< polymer-element> 
  

我希望能够在title属性为in时调用my元素中的函数（任何）in-element（放在内容标记中）被更改（通过单击事件或其他）。我不知道如何使用观察或如果我需要使用mutationObserver等来访问这个。这是怎么做的/是否有可能？

解决方案

div>

像 title 这样的本地属性不能被Polymer的数据绑定系统观察到（例如 Object.observe（） [信息]）。 避免它们通常是个好主意。

在您的示例中，我更改了 title 到 mytitle ，并将它与反射：true 发布，所以属性值反射回属性。通过这种方式，您可以完全避免 .getAttribute（），只需在元素中检查 .mytitle 。您还可以在绑定中使用 {{mytitle}} 。

您可以通过变异观察者[ 1 ]。 Polymer提供了 onMutation 来监控孩子，但是你想监控孩子的属性。为此，您需要一个纯粹的MO：

  ready：function（）{
 var observer = new MutationObserver（function （突变）{
 mutations.forEach（function（m）{
 if（m.target.localName =='in-element'）{//只关心元素中的
控制台.log（m.attributeName，m.oldValue，m.target.mytitle）; 
} 
}）; 
}）; 
 //观察对子元素的属性更改
 observer.observe（this，{
属性：true，
子树：true，
 attributeOldValue：true 
 }）; 
} 
  

演示： http://jsbin.com/doxafewo/1/edit

在 domReady（），我还将 this.children [0] 的提醒改为 this。$。firstin.getDistributedNodes （）[0] .mytitle 。使用 getDistributedNodes（）会更好，因为您可以确保实际通过< content> 插入点[ 2 ]。

I'm just starting to learn Polymer. Here is a generic version of my polymer element:

<polymer-element name="my-element">
    <template>
        <style>
        :host {
            position:absolute;
            width: 200px;
            height: 100px;
            background-color: green;
        }
        </style>
        <p>my element</p>
        <content id="first-in"></content>
        <content id="second-in"></content>
    </template>
    <script>
    Polymer('my-element', {
        domReady: function() {
            alert(this.children[0].getAttribute('title')); 
            //this returns the value I want to observe
        }
    });
    </script>
<polymer-element>

The content tags are both being filled with another custom element (again slightly simplified):

<polymer-element name="in-element" attributes="title">
    <template>
        <style>
        ...
        </style>
        <p>{{title}}</p>
    </template>
    <script>
    Polymer('in-element', {
        title: 'me'
    });
    </script>
<polymer-element>

What I want to be able to do is call a function in my-element when the title attribute in (any) in-element (put in the content tag) is changed (by a click event or whatever). I'm not sure how to access this using observe or if I need to use mutationObserver, etc. How is this done/Is it possible?

解决方案

Native properties like title are not observable by Polymer's data-binding system (e.g. Object.observe() [info]). It's generally a good idea to avoid them.

In your example, I've changed title to mytitle and published it with reflect: true so the property value reflects back to the attribute. This way you can completely avoid .getAttribute() and just check .mytitle on in-elements. You can also use {{mytitle}} in bindings.

You can do this through mutation observers [1]. Polymer provides onMutation to monitor children but you want to monitor attributes of children. For that, you need a pure MO:

ready: function() {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      if (m.target.localName == 'in-element') { // only care about in-element
        console.log(m.attributeName, m.oldValue, m.target.mytitle);
      }
    });  
  });
  // Observe attribute changes to child elements
  observer.observe(this, {
    attributes: true,
    subtree: true,
    attributeOldValue: true
  }); 
}

Demo: http://jsbin.com/doxafewo/1/edit

In domReady(), I also changed your alert of this.children[0] to this.$.firstin.getDistributedNodes()[0].mytitle. Using getDistributedNodes() is better because you're guaranteed to have the nodes that are actually passing through the <content> insertion point [2].

这篇关于聚合物：如何在< content>中观察变化性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！