KnockoutJS learning and application
First understanding of KnockoutJS
KnockoutJs is an MVVM framework for web development (Model, View, View Model)
Digression:
Mvvm is short for Model-View-ViewModel. That is model-view-view model.
[Model] refers to the data transmitted by the backend.
[View] refers to the page you see.
[View model] is the core of mvvm mode, it is a bridge connecting view and model. It has two directions: one is to transform the [model] into a [view], that is, to transform the data transmitted by the back-end into the viewed page. The way to achieve this is: data binding. The second is to convert the [view] into a [model], that is, to convert the page you see into back-end data. The way to achieve this is: DOM event monitoring. These two directions are realized, we call it two-way data binding.
Summary: Views and models cannot communicate directly under the framework of MVVM. They communicate through the ViewModel. The ViewModel usually implements an observer. When the data changes, the ViewModel can monitor this change in the data, and then notify the corresponding view to update automatically, and when the user operates the view, the ViewModel can also listen When the view changes, and then notify the data to change, this actually realizes the two-way binding of the data. And View and ViewModel in MVVM can communicate with each other. The MVVM flow chart is as follows:
KnockoutJS advantages:
- Business logic code and page display code are separated to make front-end projects better and maintainable
- Can encapsulate, echo and verify form data more conveniently
- Use pure Javasript library and can be integrated with any framework, it is not a substitute for jQuery library
- The KnockoutJS library provides a simple and direct way to handle complex data-driven interfaces
KnockoutJS 特性：
- Declarative binding: Use a very simple syntax to connect HTML DOM elements to the model through data binding attributes, making it very simple to implement responsiveness
- Automatic UI refresh: any changes to the view model data are automatically reflected to the UI immediately, and vice versa, no additional code processing is required
- Tracking dependencies: The relationship between KO attributes and KO library methods/attributes is transparent. Automatically track data attribute changes in KO, and update related affected areas
- Templated: Templates are a simple and convenient way to create complex UI structures-with repeated and nested areas (similar to view model data)
- Scalability: very easy to extend custom behavior
KnockoutJS syntax
Simple example
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验
<input data-bind="value: userName,valueUpdate: 'change'"/>
var viewModel = { userName: ko.observable("") };//声明
ko.applyBindings(viewModel);//在KnockoutJS中激活这个属性
data-bind introduction
"value:username"Refers to binding a field named username to
"valueUpdate: 'change'"represent a custom event.
If the valueUpdate parameter is used, it means that KO will use a custom event instead of the default event.
ko.applyBindings() introduction
ko.applyBindings(obj,[node])Receive two parameters, the first parameter is the created object, and the second parameter sets the HTML element or container to be bound. Only one activation can be performed in the same container
ko.observable() introduction
<input data-bind="value: personName">
var myViewModel = {personName: ko.observable()};
When the value in the input changes, the value will be assigned to personName at the same time, and then it can be viewed in the myViewModel object through myViewModel.personName()
Can be bound by ko:
- Control text and appearance
- Control flow
- Use form fields
- Rendering template
Official address: http://knockoutjs.com/
Chinese API document: http://www.aizhengli.com/knockoutjs/knockoutjs.html
Copyright statement: The content of the article is summarized on the Internet. If the rights of the original author are violated, please contact me Delete or authorize matters