Getting started

  1. How KO works and what benefits it brings
  2. Downloading and installing


  1. Creating view models with observables
  2. Working with observable arrays

Computed observables

  1. Using computed observables
  2. Writable computed observables
  3. How dependency tracking works
  4. Pure computed observables
  5. Reference


Controlling text and appearance

  1. The visible and hidden bindings
  2. The text binding
  3. The html binding
  4. The class and css bindings
  5. The style binding
  6. The attr binding

Control flow

  1. The foreach binding
  2. The if and ifnot bindings
  3. The with and using bindings
  4. The let binding
  5. The component binding
  6. Binding lifecycle events

Working with form fields

  1. The click binding
  2. The event binding
  3. The submit binding
  4. The enable and disable bindings
  5. The value binding
  6. The textInput binding
  7. The hasFocus binding
  8. The checked binding
  9. The options binding
  10. The selectedOptions binding
  11. The uniqueName binding

Rendering templates

  1. The template binding

Binding syntax

  1. The data-bind syntax
  2. The binding context

Creating custom bindings

  1. Creating custom bindings
  2. Controlling descendant bindings
  3. Supporting virtual elements
  4. Custom disposal logic
  5. Preprocessing: Extending the binding syntax


  1. Overview: What components and custom elements offer
  2. Defining and registering components
  3. The component binding
  4. Using custom elements
  5. Advanced: Custom component loaders

Further techniques

  1. Loading and saving JSON data
  2. Extending observables
  3. Deferred updates
  4. Rate-limiting observables
  5. Unobtrusive event handling
  6. Using fn to add custom functions
  7. Microtasks
  8. Asynchronous error handling


  1. The mapping plugin

More information

  1. Browser support
  2. Getting help
  3. Links to tutorials & examples
  4. Usage with AMD using RequireJs (Asynchronous Module Definition)

The "visible" and "hidden" bindings


The visible and hidden bindings cause the associated DOM element to become hidden or visible according to the value you pass to the binding.


<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.

<script type="text/javascript">
    var viewModel = {
		shouldShowMessage: ko.observable(true) // Message initially visible
    viewModel.shouldShowMessage(false); // ... now it's hidden
    viewModel.shouldShowMessage(true); // ... now it's visible again


  • Main parameter

    • When the parameter resolves to a false-like value (e.g., the boolean value false, or the numeric value 0, or null, or undefined), the visible binding sets to none, causing it to be hidden. This takes priority over any display style you’ve defined using CSS.

    • When the parameter resolves to a true-like value (e.g., the boolean value true, or a non-null object or array), the visible binding removes the value, causing it to become visible.

      Note that any display style you’ve configured using your CSS rules will then apply (so CSS rules like x { display:table-row } work fine in conjunction with this binding).

    The hidden binding works oppositely—when the parameter is true, it hides the element by setting the display style to none; and when the parameter is false, it removes the display style.

    If this parameter is an observable value, the binding will update the element’s visibility whenever the value changes. If the parameter isn’t observable, it will only set the element’s visibility once and will not update it again later.

  • Additional parameters

    • None

Note: Using functions and expressions to control element visibility

You can also use a JavaScript function or arbitrary JavaScript expression as the parameter value. If you do, KO will run your function/evaluate your expression, and use the result to determine whether to hide the element.

For example,

<div data-bind="visible: myValues().length > 0">
    You will see this message only when 'myValues' has at least one member.

<script type="text/javascript">
    var viewModel = {
		myValues: ko.observableArray([]) // Initially empty, so message hidden
    viewModel.myValues.push("some value"); // Now visible


None, other than the core Knockout library.