0

i'm trying to create a watch method for HTML elements, using __define[GS]etter__ when a property is changed. It reacts just fine when i set the value, but if the property listened to, is innerHTML, it somehow fails to render the given string. So basically, when im adding something to innerHTML it doesn't show.

Im using the watch method described in this previous question: Watch for object properties changes in JavaScript

I could of cause just not listen to innerHTML changes, but i'm also wondering if the __defineSetter__ somehow prevents original handling of setting the value.

Thanks!

Community
  • 1
  • 1
Tokimon
  • 4,072
  • 1
  • 20
  • 26
  • im using Chrome BTW. But after a little research i found that it used defineProperty instead, but it still doesn't render innerHTML. It is as if it overrides the native setter method. – Tokimon May 27 '10 at 10:24
  • That implementation is not meant for DOM nodes. It simply calls a callback when the watched property is set. But nowhere does it actually set the *real* underlying property value (ie, the one that would actually *change* the inner html). – Crescent Fresh May 27 '10 at 11:08

3 Answers3

0

That shim code doesn't actually write-through: when you set a property, the value is only remembered on the watch-wrapper and not passed down to the underlying object. It's designed for pure JavaScript objects whose properties have no side-effects (like changing the DOM, in innerHTML's case).

Making it write-through would be a pain since there's no way to directly call the prototype's setter. You'd have to temporarily remove the property, write to the underlying property, then put it back in place.

However it's not really worth pursuing IMO. DOM Nodes are permitted to be ‘host objects’, so there is no guarantee any of the native-JavaScript object-property functions will work on them at all.

(In any case, adding new members onto the Object prototype is generally considered a Really Bad Idea.)

I could of cause just not listen to innerHTML changes

I think that's best, yes.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Hm. yeah i sounds like an idea, however the general problem is that is's not only innerHTML that is the problem but all navtive DOM properties. Thus making it even more cumbersome what i'm trying to do. I'm going to try and find some way of doing it. – Tokimon May 27 '10 at 12:44
  • It is explicitly impossible to live-watch host object properties in any standards-compatible way. (There's DOM Mutation Events for some specific changes, but support isn't great.) You will have to use a poller to check, or, better, make sure you always use your own wrapper-function (that fires callbacks) to set properties. – bobince May 27 '10 at 13:24
0

Ok update. I found this page on MSDN, which has exactly what i need: http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

But the Object.getOwnPropertyDescriptor way of doing things apparently only works in IE. Bummer. Any ideas would be appreciated.

Tokimon
  • 4,072
  • 1
  • 20
  • 26
0

I found another webpage with something that looked interesting, but i couldn't quite get it to do what i wanted: http://www.refactory.org/s/recent/tag/accessors

I've decided to find a workaround for now, something with a timer that checks the attribute for changes and attribute change evnets for browsers that support that.

But if any one finds a solution for the question plz post :)

Tokimon
  • 4,072
  • 1
  • 20
  • 26