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

[Pavel]

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.

[Pavel]

Created a fiddle to illustrate this: http://dojo.telerik.com/abimi/2

[Petyo]

Hi,

I assume that you want to achieve something like this.

Regards,
Petyo
Telerik

 

 

[Pavel]

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?

[Petyo]

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