__defineSetter__ on innerHTML stops it from rendering

Question

Hi,

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: http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes

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!

Answer 1

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.

Answer 2

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.

Answer 3

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 :)