Understanding knockout and how to use knockout binding context _javascript tips

Knockout Introduction

Knockout abbreviation KO, is a lightweight JavaScript class library, using the MVVM design mode (i.e. model, view, ViewModel), simple and elegant implementation of two-way binding, real-time update, to help you use a clean data model to create rich, A responsive user interface.

Knockout has three core features:

1. Elegant dependency Tracking (elegant dependency tracking): Any time the data model changes will automatically update the corresponding UI parts;

2. Declarative binding (declarative bindings): Simply by associating the UI with your data model, you can create complex dynamic UIs;

3. Highly scalable (trivially extensible): Only a few lines of code implement a custom behavior to bind as a declarative;

Other Advantages:

1. Pure JavaScript code;

2. Can be added to your existing Web applications at any time;

3. Lightweight, only 13K after Gzip;

4. Able to work in almost all major browsers (IE 6+, Firefox, Chrome, Safari, Edge, others);

Ko is using the MVVM design mode, that is, Model view ViewModel.

A simple example

It's that simple, you don't have to write code to update the text, it will automatically update as the length of the array changes, and similarly, if we want to take advantage of the availability of the array length control button, we need only:

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

Next, we'll introduce you to use the knockout binding context

Binding context

The binding context is a data-saving object that you can reference in your bindings. When binding is applied, knockout automatically creates and manages the inheritance relationship of the binding context. The root of this hierarchy refers to the ViewModel parameter (ko.applybindings (ViewModel)) that you specify.

Then, each time you use a control flow such as with or foreach to create a child node binding context references the nested ViewModel data.

$parent

<H1 data-bind= "Text:name" > 
 

$parents

This is an array that represents all of the parent node view models

$parent [0]: Represents the parent node;

$parent [1]: On behalf of the grandfather node;

$parent [1]: On behalf of great-grandfather node;

..... Analogy

$root

It is the root-node view model object of the root context, typically specified by ko.applybindings, equivalent to $parents[$parents. length-1].

$component

If you are in the context of a particular component template, $component specify that component, its specified component is equivalent to $root, and 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 the nested binding context, this parameter is set to the current data item.

$data is very useful, for example, when you want to refer to the ViewModel itself rather than the ViewModel attribute.

<ul data-bind= "foreach: [' Cats ', ' dogs ', ' fish '] ' >
 <li>the value is <span data-bind=" text: $data " ></span></li>
</ul> 
$index (available only in foreach binding)

It is a 0-based index entry for an array in a foreach binding. Do not want the other context properties, $index is observable, that will be updated with the array item update.

$parentContext

Specifies the binding context object at the parent node level, which, unlike $parent, specifies the data in the parent node rather than the binding.

$rowData

It is the value of the original ViewModel in the current context, usually equivalent to $data, but if ViewModel is modified by KO observable, the $data is unobservable, and $rowdata is observable.