Knockoutjs

Knockoutjs

https://knockoutjs.com/index.html

https://knockoutjs.com/documentation/introduction.html

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Headline features:

• Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.
• Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.
• Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Additional benefits:

• Pure JavaScript library - works with any server or client-side technology
• Can be added on top of your existing web application without requiring major architectural changes
• Compact - around 13kb after gzipping
• Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, Edge, others)
• Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms

Knockout含义

https://www.merriam-webster.com/dictionary/knockout

Definition of knockout 

(Entry 1 of 3)

1a : the act of knocking out : the condition of being knocked out

b(1) : the termination of a boxing match when one boxer has been knocked down and is unable to rise and resume boxing within a specified time

(2) : technical knockout

c : a blow that knocks out an opponent

2 : a sensationally striking, appealing, or attractive person or thing

DEMO

https://knockoutjs.com/examples/helloWorld.html

Source code: View

<p>First name: <input data-bind="value: firstName" /></p>

<p>Last name: <input data-bind="value: lastName" /></p>

<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

Source code: View model

// Here's my data model

var ViewModel = function(first, last) {

    this.firstName = ko.observable(first);

    this.lastName = ko.observable(last);

 

    this.fullName = ko.pureComputed(function() {

        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.

        return this.firstName() + " " + this.lastName();

    }, this);

};

 

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work