Create A CheckBox List With Knockout
- Written by Chad Campbell on Aug 13th 2013
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
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 '
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
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
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.