Thursday, June 6, 2013

How to check when setValue is called on a component

I ran into a problem where one of my components, namely a radio button, was being reset somewhere. The problem is to identify when a component's value is being set. To troubleshoot this, all I had to do was listen for a certain event change on the radio and break on that. The change event is fired when the setValue function of the component is called. In my example, the panel containing the radio button had an itemId set, so all I had to do was create a selector in my controller to find it.

In your controller:

init: function() {
    var me = this;

    me.control({
        '#configConfigConfigView radio': {
            change: me.stateChange,
        }
    });
},

stateChange: function(radio, newValue, oldValue) {
    console.log(radio + newValue + oldValue);
},

Then make a breakpoint on that function in Chrome developer tools or Firebug and examine the stack trace.