Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the basic grammars of Knockout". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 Hello world

In this example, both input fields are bound to the observable variable on data model. "full name" shows a dependent observable whose value is the result of combining the values of the first two input boxes.

No matter which input box is updated, you will see that the "full name" display results will be updated automatically. Looking at the HTML source code, you can see that we don't need to declare the onchange event. Knockout knows when to update UI.

Code: View

First name:

Last name:

Hello,!

Code: View model

/ / here is the declared view model var viewModel = {firstName: ko.observable ("Planet"), lastName: ko.observable ("Earth")}; viewModel.fullName = ko.dependentObservable (function () {/ / Knockout tracks dependencies automatically. / / It knows that fullName depends on firstName and lastName, / / because these get called when evaluating fullName. Return viewModel.firstName () + "+ viewModel.lastName ();}); ko.applyBindings (viewModel); / / This makes Knockout get to work

2 Click counter

This example shows creating a view model and binding various bindings to HTML element tags to show and modify the state of the view model.

Knockout is based on dependencies. Internally, hasClickedTooManyTimes has a subscription on numberOfClicks to force hasClickedTooManyTimes to re-execute when the numberOfClicks changes. Similarly, hasClickedTooManyTimes is referenced in multiple places on the UI interface, so when the hasClickedTooManyTimes changes, it also causes the UI interface to be updated.

Instead of manually declaring or subscribing to these subscription subscriptions, they are created and destroyed by the KO framework itself. Refer to the following code for implementation:

Code: View

You've clicked times Click me That's too many clicks! Please stop before you wear out your fingers. Reset clicks

Code: View model

Var clickCounterViewModel = function () {this.numberOfClicks = ko.observable (0); this.registerClick = function () {this.numberOfClicks (this.numberOfClicks () + 1);} this.hasClickedTooManyTimes = ko.dependentObservable (function () {return this.numberOfClicks () > = 3;}, this);}; ko.applyBindings (new clickCounterViewModel ())

3 Simple list

This example shows binding to an array.

Notice that the Add button is available only if you enter some values in the input box. Refer to the following HTML code for how to use enable binding.

Code: View

New item: Add

Your items:

Code: View model

Var viewModel = {}; viewModel.items = ko.observableArray (["Alpha", "Beta", "Gamma"]); viewModel.itemToAdd = ko.observable (""); viewModel.addItem = function () {if (viewModel.itemToAdd ()! = ") {viewModel.items.push (viewModel.itemToAdd ()); / / Adds the item. Writing to the "items" observableArray causes any associated UI to update. ViewModel.itemToAdd (""); / / Clears the text box, because it's bound to the "itemToAdd" observable}} ko.applyBindings (viewModel)

4 Better list

This example adds the remove item function (multi-selection) and sorting function to the previous example. The "remove" and "sort" buttons become disabled when they are not available (for example, there is not enough item to sort).

Refer to how the HTML code implements these functions, and this example also shows how to use anonymous functions to implement sorting.

Code: View

Add item: Add

Your values:

Remove Sort

Code: View model

/ / In this example, betterListModel is a class, and the view model is an instance of it. / / See simpleList.html for an example of how to construct a view model without defining a class for it. Either technique works fine. Var betterListModel = function () {this.itemToAdd = new ko.observable (""); this.allItems = new ko.observableArray (["Fries", "Eggs Benedict", "Ham", "Cheese"]); / / Initial items this.selectedItems = new ko.observableArray (["Ham"]) / / Initial selection this.addItem = function () {if ((this.itemToAdd ()! = ")) & & (this.allItems.indexOf (this.itemToAdd ()) < 0) / / Prevent blanks and duplicates this.allItems.push (this.itemToAdd ()); this.itemToAdd (") / / Clear the text box} this.removeSelected = function () {this.allItems.removeAll (this.selectedItems ()); this.selectedItems ([]); / / Clear selection}}; ko.applyBindings (new betterListModel ()); "what are the basic grammars of Knockout". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.