Polymer：如何观察 <content> 属性的变化

Question

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

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

当（任何）元素内（放入内容标签）中的标题属性（通过点击事件或其他）更改时，我想要做的是在我的元素中调用一个函数。我不确定如何使用observe 访问它，或者我是否需要使用mutationObserver 等。这是如何完成的/有可能吗？

Answer 1

Polymer 的数据绑定系统无法观察到像 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