This is a migrated thread and some comments may be shown as answers.

MVVM function calls, value of "this" different for click event vs console call

2 Answers 7 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 19 Nov 2018, 05:59 PM

I'm setting up a fairly complex (for us) ViewModel for report generation, which will have multiple nested fields that need to call functions on each other and on parents and children.  I'd like to be able to test it in the browser console by calling the VM functions directly, but I've found that "this" is different in the functions depending on whether they've been called by a data-bind click event, vs being called directly from the console command line.

Here's a Dojo setup showing the problem: https://dojo.telerik.com/ucalOzoW

Open the browser console and click Run in Dojo.  You'll see it call testVm.funcTopLevel() with no problem.  Then it calls testVm.fields.field1.funcNested() as you would from the console, and it works as I would expect, where this.id refers to the id property of the object at that level ("idField1"), and this.parent().parent().id refers to the id property of the parent object ("idTopLevel").

But then when you click the "call funcNested" button, "this" now refers to the top-level VM object, and this.parent() is undefined.  I'm assuming there's something going on with how the functions are being bound to "this" in MVVM when called from a click event...

I'd like for the function's behavior and scope to be the same no matter if it's called from the console or from a click event, is there any way to do that?  Or is there something I'm missing?

Thanks!

2 Answers, 1 is accepted

Sort by
0
Sam
Top achievements
Rank 1
answered on 20 Nov 2018, 06:41 PM

I found a brute-force workaround that I'm using until I find some other way.  I put this line at the top of my nested functions:

var self = this; while (typeof self.parent() !== 'undefined') self = self.parent();

Then I use "self" instead of "this" everywhere in the function, and I know it always refers to the top-level VM object, no matter where the function is being called from.  Fortunately, performance isn't an issue (yet, anyway), but that would be a potential concern about doing it this way, not to mention it seems inelegant.

0
Ivan Danchev
Telerik team
answered on 21 Nov 2018, 03:36 PM
Hello Sam,

An alternative approach in this scenario involving nested fields would be to use a template through which to specify the context. Here's a modified version of the original dojo example. this.id and this.parent().parent().id values are identical when the method is called initially and subsequently on clicking the call funcNested button.

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MVVM
Asked by
Sam
Top achievements
Rank 1
Answers by
Sam
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or