Over a million developers have joined DZone.

Knockout Click binding and the ‘this’ context

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

When using Knockout JS wiring to the click binding is cake and simply just works.  Or does it?

Per the documentation there are multiple ways to wire the click binding within your html.  Assume you have a method such as (the code below is TypeScript)

    public AddMember(member: MemberViewModel) {  
        var self = this;  
      
        // method body here   
    }  

You can do any of the following:

    data-bind=”click: myFunction()” – this will pass in the current $data instance in by default  
      
    data-bind=”click: function(data, event){ myFunction($data, data, event)}” – this will manually pass in the current $data instance  
      
    data-bind=”click: myfunction.bind($data)”  

All of the above will accomplish the same goal, passing in the current $data object into the underlying method.  However, what appears to be the same is actually quite different.  The difference comes in when you are going to use the ‘this’ context.  Lets take a deeper look.

‘this’ context for option 1:

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_2DD552DF.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367274645&Signature=UnL%2fmsGYECTheQgtQjS9FdTJZWg%3d

‘this’ context for option 2:

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_48A4099C.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367274664&Signature=ZLLuWuScoo6ZXmSLYMj47p8a4ms%3d

‘this’ context for option 3:

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_7CD832E2.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367274675&Signature=fZU%2fVCzJVJGa5e252f9a8op4SBQ%3d

Did you notice the difference?  2 of the options (1 & 3) set the ‘this’ context equal to the passed in $data object.  Option 2 has the context set to the $parent object (in our case the view model).

Now I am NOT saying which one is right and which one is wrong because they are all right.  However, I just want to make sure everyone is aware of the differences.  In many cases i use option 2 because I want direct access to the underlying view model and this provides this.

I am sure there are many different ways in JavaScript/Knockout to get the parent View Model but honestly I like low friction and option 2 provides this for me.

Till next time.



Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Derik Whittaker, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}