Customizing Build-in Binding in KnockoutJs using PhoneGap

Introduction:
Knockout.Js not only gives us the ability to use build-in bindings but also allows us to use our own custom bindings. In this blog, we will basically look into creating the custom bindings for Knockout.Js using PhoneGap.

Description:
Creating custom binding is much easier than ever. Before moving forward, we need to get into the basic structure to register our custom binding. To register a custom binding, we need to add it as a sub-property to ko.bindingHandlers.

          ko.bindingHandlers.myCustomBinding = {
       init: function(element, valueAccessor, allBindings, viewModel, bindingContext ) {
          // You code for bind goes here.
		// This will be called when binding is first applied on 		// an element.
       },
	  update: function(element, valueAccessor, allBindings, viewModel, bindingContext ) {
          // This will be called whenever the associated 				// observable value changes. 
       }
    };

So here we don’t need to define both init and update. We just need to define one as per our requirement.

Now let’s get to know each of the parameters we will get in the functions.

  • element — The DOM element upon which the binding is applied.
  • valueAccessor — A JavaScript function that can get us the current model property that is been involved in this binding.
  • allBindings — A JavaScript object that can be used to access all the model values bound to this DOM element. We can use allBindings.get(‘someProperty’) to retrieve the value of the name binding, it will return undefined if the binding doesn’t exist. Also, we can do allBindings.has(‘someProperty’) to check if the name binding is available for the current element.
  • viewModel — An Object that holds the view model linked with the current DOM element. This parameter is deprecated in Knockout 3.x. We should use bindingContext.$data or bindingContext.$rawData to access the view model instead.
  • bindingContext — An object that holds the binding context available to this element’s bindings. This object includes special properties including $parent, $parents, and $root that can be used to access data that is bound against ancestors of this context.

Let’s override built-in binding for click event. For better and responsive click, let’s implement the Google’s FastButton.

To override the click event, below is the code.

           ko.bindingHandlers.click = {
       init: function(element, valueAccessor, allBindings, viewModel, bindingContext ) {
          new FastClick(element, function(event) {
			(valueAccessor().call(bindingContext.$data, event));
		});
       }
    };

That’s it, now we can use our custom binding with the DOM as like below,

<button data-bind="myCustomBinding: myFunction">Click Me</button>

Conclusion:
In this blog we get to know how to define custom binding as well as overriding the build-in binding with our own binding.

Written By: Ashis Kumar, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s