Question

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

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

内容标记都填充了另一个自定义元素（再次略微简化）：

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

我希望能够做的是当（任意）元素（放入内容标记中）中的title属性发生更改时（通过单击事件或其他任何内容）调用my元素中的函数。我不确定如何使用observe来访问它，或者我是否需要使用mutationObserver等。这是如何完成的/是否可能？

Answer 1

聚合物的数据绑定系统无法观察到像title这样的原生属性（例如Object.observe() [info]）。 避免使用通常是一个好主意。

在您的示例中，我已将title更改为mytitle并将其与reflect: true一起发布，以便属性值反映回属性。这样您就可以完全避免.getAttribute()，只需检查元素内的.mytitle即可。您还可以在绑定中使用{{mytitle}}。

你可以通过变异观察者[1]来做到这一点。 Polymer提供onMutation来监视孩子，但是你想要监视孩子的属性。为此，你需要一个纯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
  }); 
}

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

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

Answer 2

每个属性都有一个观察者。所以在你的情况下它应该是这样的。虽然有2种不同的实现，但有一种属性名称作为函数的第一个参数。

Polymer('in-element', {
    title: 'me',
    titleChanged: function(oldVal, newVal) {
        // do something
    }
});

Polymer change watchers

聚合物：如何监视<content>属性</content>中的更改

2 个答案: