CreateView - Button onselect - Not able to call another custom function defined in the same view

SajuP15 Nov 2011 9:10 PM

Hi,   This might be a javascript thing, but I'm not able to figure out..  I have a custom function defined with in the view and I want to call that function on click of a button (I have added it as part of the onselect listener definition in the create view function).  When I click on the button I get the error "TypeError: this.testfunc is not a function".  

If I call the same function from updateView it works just fine.. I'm doing some thing wrong..but not sure what it is... here is a stripped down version of my code.. it basically has a button defined inside create view and the event listener definitions for the button and a dummy updateView and testfunc (my custom function).

var TestView = new KONtx.Class({
    ClassName: 'TestView',
    Extends: KONtx.system.SidebarView,
    createView: function() {
var regbutton = new KONtx.control.TextButton({
label: "Complete",
guid: "button0",
events: {
onSelect: function(event) {
this.testfunc(); //This returns the error : TypeError: this.testfunc is not a function".  
},
},
}).appendTo(this); //end of regbutton
    }, //End of create view

    updateView: function() {
this.parent();
this.testfunc();
    }, //End of update view.

    testfunc: function() {
print(" ********************************** Test Func called ");
    }, //End of test func
});






Vivek Jani15 Nov 2011 11:27 PM
You need to bind the function for onSelect to the correct scope. When the function onSelect is executed, by default &quot;this&quot; keyword will point to the TextButton object, which obviously doesn&#39;t contain testfunc. So, while defining the onSelect function, if you bind it to &quot;this&quot;(in this case &quot;this&quot; refers to the view itself), then it will run fine<br><br><span style="font-size:12px;font-family:Lucida Console;">var regbutton = new KONtx.control.TextButton({</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp; label: &quot;Complete&quot;,</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp; guid: &quot;button0&quot;,</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp; events: {</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onSelect: function(event) {</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.testfunc(); //This returns the error : TypeError: this.testfunc is not a function&quot;. </span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;&nbsp; }<strong>.bindTo(this)</strong>,</span><br><span style="font-size:12px;font-family:Lucida Console;">&nbsp;},</span><br><span style="font-size:12px;font-family:Lucida Console;">}).appendTo(this); //end of regbutton</span><br><br>Thanks,<br>Vivek
Vivek Jani15 Nov 2011 11:37 PM
Basic difference between why it works for updateView and not for the event handler is that updateView(or any other method belonging to the view itself) has the scope of the view itself, whereas the event handler is a function that belongs to the button object, so by default it will run in that scope. And in this case by using bindTo, we are forcing it to use the view&#39;s scope since we need to call a method in there.<br><br>Another way to do the same thing is :<br><br>createView: function() {<br>&nbsp;&nbsp;&nbsp; <strong>var self = this;//This is the view&#39;s reference</strong><br>&nbsp;&nbsp;&nbsp; var regbutton = new KONtx.control.TextButton({<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label: &quot;Complete&quot;,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; guid: &quot;button0&quot;,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; events: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onSelect: function(event) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>self.testfunc(); </strong>// We just use the self reference instead of this so that we can even call any button related methods such as this.setText if we need.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<br>&nbsp;&nbsp;&nbsp; }).appendTo(this); //end of regbutton<br>},<br>//End of create view<br>
SajuP16 Nov 2011 8:27 PM
<br><div class="quote "><div class="quotetop ">QUOTE<cite>(Vivek Jani @ 15 Nov 2011 11:37 PM)</cite><blockquote class="quotemain"><br>createView: function() {<br>&nbsp;&nbsp;&nbsp; <strong>var self = this;//This is the view&#39;s reference</strong><br>&nbsp; &nbsp;<br></blockquote><br>Thanks Vivek, you just solved my problem, I&#39;m trying to get my head around javascript scope, closure issues etc... appreciate your quick response.&nbsp;</div></div>