Create A CheckBox List With Knockout

Occasionally, you want to allow a user to select multiple related options. A lot of times, this task is tackled with the help of a checkbox list. This post will show you how to create a checkbox list using Knockout. Adding a checkbox list to your page involves the following seven steps.

step 1: define the checkbox list frame

Use a DIV element and set the overflow-y CSS value to scroll. This approach will allow you to take control of your layout. For instance, you can set the height and width of your checkbox list more easily.

step 2: create a checkbox item template

Decide how you want a checkbox item in your checkbox list to look. Once decided, create the template in a SCRIPT element. For the sake of this example, we'll use the following HTML.

From this snippet, its important recognize two things. First, notice that the type of the SCRIPT element is set to 'text/html'. This is needed to ensure that the markup is not viewed as JavaScript. Also take note that the id property of the SCRIPT element is added. The id property will be used later to reference the template.

step 3: define your view model

A view model is a key concept in the Knockout world. It helps us seperate our UI from data. The details of view model are beyond the scope of this post. Still, in the context of this example, we'll use the following view model.

This short snippet defines a basic view model that will be bound to the UI later. For your specific case, you may need to refer to the Knockout documentation.

step 4: add an observable array property

We want to bind to a collection of objects. The best way to handle that is by exposing a property as an observableArray. As shown in the code snippet below, we've added an observableArray of objects called teams

step 5: add a flag

Expose a flag called "isChecked" or "isSelected" on your objects. This will be used to keep the view model in sync with the user experience. This flag is even more important if you need to synchronize data between your client-side environment and a server-side environment like Node. Here's an updated version of our last snippet.

step 6: activate knockout

Use your fully defined view model and activate Knockout. First, you must initialize an instance of your view model. Then, you have to leverage Knockout's applyBindings method. These two steps are shown in the code snippet below.

step 7: define your bindings

Decorate the DIV element created in Step 1 with a data-bind attribute. This attribute can be used to identify what is being bound to. Here is what our DIV from step 1 looks like updated: The above snippet binds to the collection of teams completed in step 5. Each of those teams are displayed via the template created in step 2.

These seven steps show how to create a checkbox list using Knockout. If you want to see a completed example, you may download it from here. If you're curious about how to create a checkbox list with Angular instead, please visit here. If you have any questions or comments related to this post, please leave them in the comments below. If you would like other help from Ecofic, please contact us.