我正在尝试实现一个新的 polymer 自定义元素。但是,我想在元素内容更改时触发自定义事件。到目前为止我的代码如下:
<link rel="import" href="../../lib/polymer/polymer.html">
<polymer-element name="dnd-dropdown" attributes="field">
<template>
<link rel="stylesheet" href="dnd-dropdown.css">
<div id="c">
<div class="dndValue"><content></content></div>
<div class="dndTitle">{{field}}</div>
</div>
</template>
<script>
Polymer({
field: "...",
ready: function () {
this.onMutation(this, this.contentChanged);
},
contentChanged: function (e) {
console.log("contentChanged event fired");
console.log("event = %o", e);
}
});
</script>
</polymer-element>
我对此的理论是,只要 dndValue 节点发生变化(即元素的内容发生变化),onMutation 就会触发,并且会打印两条控制台消息。但是,当我在 Chrome 中的 F12 开发人员工具中更改元素时,没有任何反应。
观察 polymer 中含量变化的最佳方法是什么?
最佳答案
Polymer 1.7 的更新方法:
使用以下模板
<template>
<content id="myContent"></content>
</template>
您可以通过以下方式观察节点变化
attached: function() {
Polymer.dom(this.$.myContent).observeNodes(this._nodesChanged);
},
_nodesChanged: function() {
var elements = this.$.myContent.getElements();
for(var i = 0; i < elements.length; i++) {
$(elements[i]).on("change", function(){
this.doStuffWithChangedNodes();
}.bind(this));
}
this.doStuffWithChangedNodes();
},
doStuffWithChangedNodes: function() {
var elements = this.$.myContent.getElements();
// you can loop and work with each element
...
}
关于javascript - 观察 polymer 的含量变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29201224/