7

Now that Object.observe() is on by default in Chrome, I'm running into a bunch of cases where I want to reuse the browser's built in property (hidden, title, draggable), but *Changed watchers no longer get called when the property changes.

One example is hidden: http://jsbin.com/jizikaje/1/edit (hiddenChanged() is never called)

My current workaround is to use attributeChanged() to observe the attribute changing:

attributeChanged: function(attrName, oldVal, newVal) {
  // Cannot use *Changed watchers for these native properties.
  if (attrName == 'hidden') {
    this.marker.setVisible(!this.hidden);
  }
}

What is the recommended approach?

BTW, throwing a warning when trying to use native properties will go a long for debugging: https://github.com/Polymer/polymer/issues/379

ebidel
  • 23,003
  • 2
  • 58
  • 75
  • The `alert()` seems to be happening for me in Chrome 34. Maybe this has been fixed? – jokeyrhyme Jun 07 '14 at 09:11
  • Chrome 34 does not have Object.observe(). It uses dirty checking. – ebidel Jun 07 '14 at 16:15
  • Ah yeah, this makes sense. The DOM hasn't been moved into V8 yet, so Object.observe() probably doesn't work on DOM elements. – jokeyrhyme Jun 08 '14 at 00:22
  • So you want to listen for a DOM element state change? Use the mutationobserver as mentioned in the answer: http://jsfiddle.net/LkxWX/ – Johan Jun 08 '14 at 00:53
  • You could certainly use a MO to detect attribute changes on the element, but you already get the `attributeChangedCallback` for free :) Either way, the solution is hacky. It relies on the fact that the native IDL properties also expose an attribute of the same name. So you're not observing the property, but attribute changing. – ebidel Jun 08 '14 at 00:57
  • Things have changed for Polymer and ECMA script since this question was posted and subsequently the question is of little value now. – Scott Boring Dec 27 '16 at 19:08

2 Answers2

0

Object.observe() is for JavaScript stuff, and MutationObserver is for DOM elements. MutationObserver would probably work better in this case.

jokeyrhyme
  • 2,531
  • 2
  • 20
  • 19
  • 2
    Note, to save trouble in the future: MutationObservers are only fired for actual DOM-tree mutations (i.e., those that effect the structure and attributes of the DOM). This will *not* allow you to catch changes to native properties. As of Oct 2014, there's no way to do this in Chrome -- you should be able to shim native property getters via Object.defineProperty(), but that won't work because Object.getOwnPropertyDescriptor() is broken for native properties on Chrome and Safari. – Joel Webber Oct 09 '14 at 16:06
0

It looks like this is an old post for Polymer 1 and probably is no longer a useful question.

The Object.observe() proposal has been withdrawn and is not supported by any browsers.

Polymer now uses declared properties which supports observers.

Scott Boring
  • 2,166
  • 19
  • 29