Understanding Knockout and how to use Knockout to bind context_javascript skills

Introduction to Knockout

Knockout, referred to as ko, is a lightweight javascript class library that uses the MVVM design pattern (i.e. Model, view, viewModel) to simply and elegantly implement two-way binding and real-time updates to help you use a clean data model. Create rich, responsive user interfaces.

Knockout has three core features:

1. Elegant dependency tracking: Any time the data model changes, the corresponding UI part will be automatically updated;

2. Declarative bindings: Simply associate the UI with your data model, and you can create complex dynamic UI;

3. Trivially extensible: It only takes a few lines of code to implement a custom behavior as a declarative binding;

Other advantages:

1. Pure javascript code;

2. Can be added to your existing web application at any time;

3. Lightweight, only 13K after GZIP;

4. Can work in almost all mainstream browsers ((IE 6+, Firefox 2+, Chrome, Safari, Edge, others);

ko uses the MVVM design pattern, that is, model view viewModel.

Simple example

There are <span data-bind="text: myItems().length"></span> items 

It’s that simple, you don’t have to write code to update the text content, it will automatically update when the array length changes. Similarly, if we want to use the array length to control the availability of the button, we only need:

<button data-bind="enable: myItems().length < 5">Add</button>

The following will introduce to you how to use Knockout to bind context

Binding context

Binding context is an object that holds data that you can reference in your bindings. Knockout automatically creates and manages inheritance relationships for binding contexts when applying bindings. The root of this hierarchy refers to the viewModel parameter you specify (ko.applyBindings(viewModel)).

Then use a control flow such as with or foreach each time to create a child node binding context to reference the nested viewModel data.

$parent

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div> 

$parents

This is an array representing all parent node view models

$parent[0]: represents the parent node;

$parent[1]: represents the grandparent node;

$parent[1]: represents the great-grandfather node;

.....and so on

$root

It is the root node view model object of the root context, generally specified through ko.applyBindings, equivalent to $parents[$parents.length - 1].

$component

If you are in the context of a specific component template, $component specifies that component, and its specified component is equivalent to $root. In the case of nested components, it represents the nearest component.

$data

It represents the viewModel object in the current context, $data and $root are equivalent. In a nested binding context, this parameter will be set to the current data item.

$data is very useful, for example, when you want to reference the viewModel itself rather than the viewModel's properties.

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(仅在foreach binding中可用)

It is the 0-based index entry of the array in the foreach binding. Unlike other context attributes, $index is observable, that is, it will be updated as the array item is updated.

$parentContext

specifies the binding context object at the parent node level. The difference from $parent is that it specifies data in the parent node rather than the binding context.

$rowData

It is the value of the original viewModel in the current context. Usually it is equivalent to $data. However, if the viewModel is modified by ko with observable, $data is unobservable and $rowData is observable.