This article is a mirror article of machine translation, please click here to jump to the original article.

View: 14505|Reply: 0

[Other] Knockout Getting Started Guide and Introduction

[Copy link]
Posted on 8/11/2017 12:24:27 PM | | |

What is Knockout.js?

Knockout is a great Javascrip libraryIt helps you create a text-rich user interface with good display and editing capabilities using only a clear and clean underlying data model. Anytime your local UI content needs to be updated automatically (e.g., depending on changes in user behavior or external data sources), KO can be easily implemented and very easy to maintain.

Important features of KO:

Elegant dependency tracking - Anytime the data source model changes, it can automatically update the specified content of your UI.
Declarative binding - It binds your UI to the data source model in a simple and simple way, and you can use any nested structure template to build a complex dynamic interface.
Good scalability - a custom behavior can be implemented with a few simple lines of code to bind as a new declaration.
Other advantages:

Pure Javascrip{filtering}t library - compatible with any server and client technology.
It can be applied well to existing applications - without the need for changes in the main architecture of the program.
Simplicity - only 13K after Gzip compression.
Compatible with any major browser (IE 6+, Firefox 2+, Chrome, Safari, and others)
A comprehensive set of specifications (with behavior-driven development) – this means that they can be easily verified in new browsers or platforms.
Developers familiar with Ruby on Rails, Asp.net MVC, or other MVC technologies may find it to be an MVC real-time form with a declarative syntax. In other words, you can think of KO as a way to make a UI user interface by editing JSON data... Whatever it does for you.

How to use it?

The quickest and most fun way to get started is through interactive instruction, and once you've mastered the most basic techniques and learned each online instance, you'll be ready to work on your projects.

Are KO and Jquery (prototype, etc.) competing with each other or can they be used together?

Everyone loves Jquery! In the past, we had to endure various inconsistent DOM object manipulation API methods, and the emergence of Jquery is a great alternative to the clunky frameworks of the past, making it flexible and easy to use. Jquery is excellent and easy to use for web page element manipulation and event handling, while KO solves a different problem.

If your UI interface is slightly more complex and contains some of the same behavior, if you only use Jquery, the UI will be more complex and difficult than you think, and it will be quite expensive to maintain. Consider the example of displaying a list of items in a table, stating the number of lists in the table, and enabling the "Add" button when the number of item lists is less than 5, otherwise disabled. Jquery doesn't have a basic data model concept, so if you want to get the number of project lists, you need to infer from the table/tr/div numbers. If you need to display the amount of data in certain SPANS, you should also remember to update the text of the SPAN when adding new data. Of course, you also need to remember that when the total number >=5, you need to disable the Add button. Then, if you want to implement the Delete function, you have to point out which DOM element needs to be changed after it is clicked.

How is it different to do it with Knockout?

With KO it all becomes very simple. It allows you to easily scale the complexity of your project without worrying about the resulting data inconsistencies. It simply converts your data into a Javascrip{filter}t array, and then uses foreach to bind the data array to a table or a set of divs in the page. Whenever the data array changes, the UI automatically responds to the change (you don't need to indicate how to insert a new row or where), and the rest is the UI data sync. For example, you can declare the following SPAN to display the amount of data:


That's it! You don't need to write code to update it, its update depends on changes to the array myItems. Similarly, the enabling and disabling of the Add button depends on the length of the array myItems, as follows:


After that, if you need to implement the "Delete" function, you don't have to specify how to manipulate the UI elements, you just need to modify the data model.

Summary: KO has no intention of competing with jQuery and other similar DOM manipulation frameworks. KO provides a high-level way to correlate the data model with the user UI interface.KO doesn't depend on jQuery itself, but you can use jQuery together, Vivid and gentle UI changes require the use of jQuery.

Resources:

http://www.aizhengli.com/knockoutjs/50/knockout.html

http://knockoutjs.com/




Previous:The RPC service framework Dubbo will be officially maintained and supported
Next:Baidu Maps removes logo copyright information
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.

Mail To:help@itsvse.com