KnockoutJs quick start tutorial and knockoutjs quick start tutorial

KnockoutJs quick start tutorial and knockoutjs quick start tutorial

I. Introduction

Previously, Bootstrap has been introduced in this series of articles. For details, refer to this article: Bootstrap getting started tutorial. Due to the recent project, the frontend is implemented by Asp.net MVC + KnockoutJs + Bootstrap. So I started writing this series again. Today, let's take a look at the MVVM framework of the Web Front-End-KnockoutJs.

Ii. What is KnockoutJs?

People who develop. NET should know that the MVVM framework is integrated in WPF, so KnockoutJs is also an MVVM framework for Web development. The advantages of MVVM are simply that the Service Logic code is separated from the page display code, which makes the front-end project better maintained.

Previously, when we wrote web pages, JavaScript code and Html code were mixed together, and the code was filled with a large number of DOM object operations. In this way, the code structure is very messy. With the MVVM framework, you can split JavaScript code from Html code, and the data operation is simpler. You only need to use the corresponding syntax (data-bind) bind to the corresponding label attribute to display, thus speeding up development.

KnockoutJs is such an MVVM framework. Instead of calling its framework, it should be more prepared as an MVVM class library. Because it does not have the MVVM framework, it is a relatively "heavy" concept, which should include routing and other features. KnockoutJS does not. Compared with AngularJS, AngularJS should be called an MVVM framework.

KnockoutJS provides the following functions:

Declarative binding (Declarative Bindings ):Associate model data with DOM elements using simple syntax. That is, the "data-bind" Syntax
Dependency Tracking ):To transform and combine data, establish a relationship between model data. For example, the total price is the sum of the prices of each item. In this case, you can use the dependency tracking function to establish a relationship between the total price and commodity items. It is derived from the total price of each item. This relationship is completed by the computed function in KnockoutJs.
Automatic UI Refresh ):When your model status changes, the UI is automatically updated. This is done by the observable function.
Template (Templating ):Quickly compile a complex and nested UI for your model data. Similar to the template concept in WPF.
Next, we will use specific examples to help you quickly master the use of KnockoutJs.

Iii. Declarative binding
Next let's take a look at how to use the data-bind syntax in KnockoutJS to bind the model data to the DOM element.

1. One-way binding

<! DOCTYPE html> 
2. The above example only completes one-way binding. In the above example, you will find that the above value will not be updated when you change the value in the input tag and leave the focus. In fact, the automatic update function in KnockoutJS is not automatically added and must be supported by corresponding functions. This function is the observable function. The following describes an example of Bidirectional binding:
<! DOCTYPE html> 
Iv. Dependency tracking
Next let's take a look at how to use the computed function in KO to complete dependency tracing. The implementation code of the example is as follows:
<! DOCTYPE html> 


Next, let's take a look at the example of complex points using declarative binding and dependency tracking. The sample code is as follows:
<! DOCTYPE html> 
5. templates
After reading the above examples, you should feel that KO (short for KnockoutJS) is very easy to get started. Because its syntax is very easy to understand, let's take a look at the use of the template in KO.
<! DOCTYPE html> 
<! DOCTYPE html> 
For more information about templates, see the official documentation: http://knockoutjs.com/documentation/template-binding.html. This article only lists the use of templates in 2.
Vi. Summary
Now, the Quick Start of KnockoutJs is over. In the next article, we will continue to introduce KO content. In the next article, we will introduce how to use KO for a practical project, do not miss it.