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

Binding vs EventBinding: this context differs when bound to a function

4 Answers 12 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Pavel
Top achievements
Rank 1
Pavel asked on 24 Jun 2015, 09:38 PM

I noticed such a behavior of, let's say, "common" (e. g., "enabled") binding and event binding: when bound to a function this context differs inside it.

For example, I add 2 functions to ObservableArray's prototope:

1) logTihis: simply logs this pointer to the console

console.log(this);

2) enableDelete: returns whether the array has more than 1 items (assume, I want to prevent deletion of the last item)

return this.length > 1;

and a template to render repeating items ("items" field of the view model is set to an array):

<tr>
  <td>#= name #</td>
  <td><button data-role="button" data-bind="enabled: parent().enableDelete, click: parent().logThis">Delete</button>
</tr>

When I write "parent().functionName" I expect the function to be called in the context of what parent() returns (items array in this case).

With enabed binding it is so (having 1 item in the array disables the button), while with click binding it is not so (this pointer in the click handler (logThis) is set to the item itself).

After checking the source code I found out that Binding.get does look for the actual context before calling the function while EventBinding.get does not.

Why is it so? Is not it about to be fixed?

 

Thank you in advance.

4 Answers, 1 is accepted

Sort by
0
Pavel
Top achievements
Rank 1
answered on 24 Jun 2015, 11:12 PM
Created a fiddle to illustrate this: http://dojo.telerik.com/abimi/2
0
Petyo
Telerik team
answered on 26 Jun 2015, 01:48 PM
Hi,

I assume that you want to achieve something like this.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pavel
Top achievements
Rank 1
answered on 26 Jun 2015, 08:15 PM

Hello Petyo,

I' d ike to extract click handler to the prototype, 'cause I have view models with multiple array fields and all of them need this behavior - so my intention was to avoid cloning repeating functions.

And I wonder why the behavior of Binding and EventBinding differs, if it was intentionally designed so, could you please explain why?

0
Petyo
Telerik team
answered on 30 Jun 2015, 12:48 PM
Hello,

in general, the parent().method binding is not meant to be supported. Unfortunately, it works by accident and many people use it. The recommended way to handle common properties/event handlers was demonstrated in my example - you can see that the this context is consistent when used in that way.

This being staid, you can use a base class (which extends the ObservableObject) for all of your handlers and use it as a constructor for your view models - this will eliminate the need to patch the Observable Array. See our help for more details

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Pavel
Top achievements
Rank 1
Answers by
Pavel
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or