Polymer: How to watch for change in properties
I\'m just starting to learn Polymer. Here is a generic version of my polymer element:
-
For every attribute there is a watcher. So in your case it should be looking like this. Although there are 2 different implementation, one with attribute name as the first argument of the function.
Polymer('in-element', { title: 'me', titleChanged: function(oldVal, newVal) { // do something } });Polymer change watchers
讨论(0) -
Native properties like
titleare 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
titletomytitleand published it withreflect: trueso the property value reflects back to the attribute. This way you can completely avoid.getAttribute()and just check.mytitleon in-elements. You can also use{{mytitle}}in bindings.You can do this through mutation observers [1]. Polymer provides
onMutationto 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 ofthis.children[0]tothis.$.firstin.getDistributedNodes()[0].mytitle. UsinggetDistributedNodes()is better because you're guaranteed to have the nodes that are actually passing through the<content>insertion point [2].讨论(0)
加载中...
- 热议问题