Data binding is the essence of many new libraries that interact with the HTML markup as it gets converted to the DOM. We saw binding in Chapter 1, Getting Started with KnockoutJS, using the data-bind ="..." bindings. Here we will be looking at conditional binding.

The first thing we will do is understand the concept of conditional binding. Our example is meant to be conceptual. We will show a more practical example shortly in this chapter.

The if binding plays a very similar role to the visible property in the DOM. The difference is that the if binding actually adds and removes the content from the DOM whereas visible swaps the CSS display style between visible and none.

Create a new file by copying the _base.htm file, located in the ko_2/do folder, and naming it condition.htm within the do folder. If you get stuck, there is a completed copy inside the done folder. To make things look better, we will now be using the larger Bootstrap template base as it will give us better...