Understand Knockout and how to use Knockout to bind context,

Understand Knockout and how to use Knockout to bind context,

Introduction to Knockout

Knockout (ko) is a lightweight javascript class library that adopts the MVVM design mode (Model, view, and viewModel). It implements bidirectional binding and real-time update in a simple and elegant manner, it helps you use a clean data model to create a rich, Responsive user interface.

Knockout has three core features:

1. Elegant dependency tracking: The corresponding UI is automatically updated when the data model changes at any time;

2. Declarative bindings: You can create a complex dynamic UI simply by associating the UI with your data model;

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

Other advantages:

1. Pure javascript code;

2. You can add it to your existing web application at any time;

3. lightweight, only 13 K after GZIP;

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

Ko adopts the MVVM design mode, that is, model view viewModel.

Simple Example

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

It is so simple that you don't have to write code to update text content. It will be automatically updated when the array Length changes. Similarly, if we want to use the array length control button, we only need:

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

Next we will introduce the use of Knockout to bind Context

Binding context

Binding context is an object that stores data. You can reference it in your binding. When an application is bound, knockout automatically creates and manages the inheritance relationship of binding context. The root of this hierarchy references the specified viewModel parameter (ko. applyBindings (viewModel )).

Then, each time a control flow such as with or foreach is used to create a subnode binding context to reference nested viewModel data.

$ Parent

$ Parents

This is an array representing all the parent nodes view models

$ Parent [0]: represents the parent node;

$ Parent [1]: represents a grandfather node;

$ Parent [1]: represents a great-grandfather node;

...... And so on

$ Root

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

$ Component

If $ component specifies the component in the context of a specific component template, 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 the nested binding context, this parameter is set to the current data item.

$ Data is very useful, for example, when you want to reference viewModel itself rather than the attributes of viewModel.

<Ul data-bind = "foreach: ['cats', 'ogs', 'fish ']"> <li> The value is <span data-bind = "text: $ data "> </span> </li> </ul> $ index (available only in foreach binding)
It is an index entry starting from 0 for an array bound to foreach. If you do not want other context attributes, $ index is observable, which will be updated with the update of array items.

$ ParentContext

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

$ RowData

It is the value of the original viewModel in the current context. Usually it is equivalent to $ data. However, if viewModel is modified by ko with observable, $ data is unobservable, while $ rowData is observable.
Articles you may be interested in:

 

 
  
Evaluate the user's password input strength using Javascript (Knockout Version)
 
  
Ko knockoutjs dynamic attribute binding skills
 
  
How to Build the Knockoutjs Environment
 
  
Knockoutjs Quick Start (Classic)
 
  
Detailed examples of using the Knockout array (observable)
 
  
How to Use Knockout visible binding
 
  
How to bind Knockout text to DOM
 
  
Knockout custom binding Creation Method