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

5 posts, 0 answers
  1. Pavel
    Pavel avatar
    15 posts
    Member since:
    May 2012

    Posted 24 Jun 2015 Link to this post

    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.

  2. Pavel
    Pavel avatar
    15 posts
    Member since:
    May 2012

    Posted 24 Jun 2015 in reply to Pavel Link to this post

    Created a fiddle to illustrate this: http://dojo.telerik.com/abimi/2
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 26 Jun 2015 Link to this post

    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!
     
  5. Pavel
    Pavel avatar
    15 posts
    Member since:
    May 2012

    Posted 26 Jun 2015 in reply to Petyo Link to this post

    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?

  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 30 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready