This is probably one of my favorite data bindings for Knockout.js: isdirty. The concept behind the function is to track when there is a change to any object including any of its properties. It’s extremely powerful handling nested objects as well.
Let’s take a look at how to use:
Whether you are using the Bootstrap datepicker with a JavaScript array or the jQuery datepicker, they both use the same underlying JavaScript library. So with today’s example, let’s explore implementing the jQuery library with an added bonus of creating a Knockout.js custom binding.
The end goal of this custom data bind jQuery tutorial is to create a form input field data bound not to the standard value binding, but instead to the custom one appropriately named: datepicker.
Having a user confirm a selection is a very common occurrence when an action is performed. In this Knockout js tutorial I’m going to demonstrate how to ask the user to confirm their choice. Only when the user has clicked OK will the observable value be changed. This example will leverage the ko.extender to create a custom Knockout extender.
I have been using Knockout.js’s afterRender for years to hide a progress bar when the foreach loop completed. All of those years I have been using it incorrectly. Once I read Knockout’s documentation about the foreach data binding function, I realized that it is actually called after each render of the element inside the foreach. This is definitely not how I wanted this function to work. In this Knockout.js tutorial let me show you my solution to accomplish applying the afterRender when the foreach has completed.
You’ve created a nice feature leveraging Knockout.js and now you want to re-use this feature on another page, another site, or in a slightly different fashion. This example will extend the previous (Un)Check All using Knockout.js and make it easily re-usable.
A Knockout component can be created using a mixture of HTML (with data bindings) and a Knockout ViewModel. By altering the previous check all example and making it slightly more re-usable, it can be easily added to other pages with minimal effort. If you are not already familiar with the example being extended, please take a minute and give the Knockout js tutorial a quick read with the link provided above.
Once the component is created, it can be included on any page with this simple HTML:
<checkall params=”items: items, selectedItems: selectedItems”></checkall>