5

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

<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 等。这是如何完成的/有可能吗？

4

2 回答 2

8

Polymer 的数据绑定系统（例如[ info ]）title无法观察到类似的原生属性。避免它们通常是个好主意。Object.observe()

在您的示例中，我已更改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 ] 的节点。

于 2014-07-11T15:13:21.937 回答
-1

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

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

聚合物变化观察者

于 2014-07-11T14:48:59.463 回答