Follow @endyourif rss Facebook LinkedIn

Knockout: `this` context with ko computed observables and subscribe

Published on May 29, 2017

In JavaScript, the `this` variable inside a function (like a computed observable or a Knockout subscribe) function can be an extremely useful variable to access related properties to your observable.  Learning the following behavior has opened many doors for me when leveraging the Knockout.js framework. This Knockout js tutorial will demonstrate through an example using a computed observable inside my ViewModel.

Convert the (un)check all to a #KnockoutJS Component

Published on Apr 29, 2015

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>

Replacing Radio Buttons with a Button Group using Bootstrap and #KnockoutJS

Published on Apr 27, 2015

Radio buttons are hard-to-see, not easy to select, and let's face it, quite mundane. You would like to replace these radio buttons with a group of buttons that represent the same functionality, e.g. only one of the options may be selected at any given time.

Leveraging Bootstrap which provides many incredibly styled components for buttons, alert boxes, tables, forms, etc... regular radio buttons will be replaced by a button group (see screenshot below). This Knockout js tutorial will be used to create a custom data binding that will make the group of buttons act like regular radio buttons (with a nicer look of course).

radiobuttongroup

This example assumes you have a basic understanding of both Bootstrap and Knockout.js. If you don't, feel free to explore my latest book ASP.NET MVC 5 with Bootstrap and Knockout.js for a great introduction, plus many more examples.

The versions used for this example are 3.3.4 for Bootstrap and 3.3 for Knockout.js. This example should be compatible with older versions of these frameworks.

(Un)Check All using #KnockoutJS

Published on Apr 23, 2015

When I wrote Knockout.js: Building Dynamic Client-Side Web Applications I was trying to focus on demonstrating specific things, such as custom bindings, extending observables, etc. Unfortunately this didn't leave room for what I would call "random" examples of things that I do on a semi-regular basis. This blog post will demonstrate how to create a (un)check all list of checkboxes.

If I haven't said it before, Knockout js examples like this are why I love working with this framework on a daily basis. This example is accomplished in under 50 lines of code, with most of it being whitespace for readability!

The following example assumes you understand how to install Knockout.js and have a brief understanding of Knockout ViewModels. If you are looking for a good introduction *cough* *cough*, my book does an excellent job of it ;)