Question

I would like to watch a DOM node property but I can’t seem to get it to work.

Within my widget, I’ve tried the following.

startup: function() {
  this.inherited(arguments);

  // First try using the dojo 1.6 watch.
  // I'm setting the property of the widget
  // to reference the DOM node's offsetWidth property
  this.width = this.domNode.offsetWidth;
  this.watch("width", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })

  // Does this.width contain a reference or a copy of this.domNode.offsetWidth?

  // Second try, the Mozilla watch
  this.domNode.watch("offsetWidth", function() {
    console.debug('Width changed to ' + this.domNode.offsetWidth )
  })
}

Answer 1

I’m would like to watch a DOM node
property but I can’t seem to get it to
work.

You can’t get it to work by adding Mozilla’s watch directly to the DOM node.

At http://james.padolsey.com/javascript/monitoring-dom-properties/ mention is made of using setInterval, onpropertychange (IE only), and DOMSubtreeModified (there are other such standard DOM modification events like DOMAttrModified, but you’d have to check browser support). The standard DOM modification events only work if the DOM attribute is changed, not the equivalent property (though you can trigger a mutation event from JS by initMutationEvent):

<input />
<script>
window.onload = function () {
  var ct=0;
  document.addEventListener('DOMAttrModified', function () {
      alert('Value modified ' + (++ct) + ' times');
  }, false);

  var input = document.getElementsByTagName('input')[0];

  input.setAttribute('value', 5); // Triggers the event
  input.value = 15; // Though it sets the value, it doesn't trigger the event

};
</script>

// First try using the dojo 1.6 watch.
// I’m setting the property of the
widget // to reference the DOM
node’s offsetWidth property
this.width = this.domNode.offsetWidth;
this.watch(“width”, function() {
console.debug(‘Width changed to ‘ + this.domNode.offsetWidth ) })

You can monitor the setting of the width property here using the Dojo API, but this does not appear to track the DOM node for you (though http://dojotoolkit.org/features/1.6/widget-watch seems to suggest it does). For example, you can do:

widget.set('width', 100);

and then your watch event above could be modified to dynamically change the DOM width (but not the offsetWidth since that is a read-only property).

Still, it appears you’re trying to detect automaticoffsetWidth calculation changes, not your own changes. The best solution for you at this point seems to me to be setInterval.

// Does this.width contain a reference
or a copy of this.domNode.offsetWidth?

A copy since this.domNode.offsetWidth is a number and in JavaScript, non-object types will always get copied by value.

// Second try, the Mozilla watch
this.domNode.watch(“offsetWidth”,
function() {
console.debug(‘Width changed to ‘ + this.domNode.offsetWidth )
})

If this were able to work (and it doesn’t), you’d need to use this.offsetWidth inside the function since Mozilla sets the callback this to that of the object being watched.