Knockoutjs 3.X API Fourth chapter of form value binding _javascript tips

Knockout is a JavaScript class library based on data model that can help you create rich text, respond to display and edit the user interface. At any time, if your UI needs to be updated automatically (for example, updates rely on user behavior or changes to external data sources), KO can be very easy to implement and easy to maintain.

Important Features:

Graceful dependency Tracking-whenever your data model is updated, the corresponding content is automatically updated.

Declarative binding-a straightforward way to correlate your user interface-specific portions to your data model.

Easily scalable-a few lines of code can implement custom behavior as a new declarative binding.

Additional Benefits:

Pure JavaScript class libraries-compatible with any server-side and client technology

Can be added to the top of the Web program-No large schema changes are required

Concise-gzip before about 25KB

Compatible with any major browsers-(IE 6+, Firefox, Chrome, Safari, other)

Adoption of behavioral-driven development-means it's easy to pass validation on new browsers and platforms.

Objective

The value binding is primarily used for assigning values to the view model by DOM elements. Typically used for elements such as <input><select><textarea>.

The difference between a value binding and a text binding is that when a user edits a form control-related value, the value automatically updates the associated property value of the view model, and the associated value binding in the form changes when the associated property value of the view model is updated.

The value binding is like a two-way channel for Dom and ViewModel. The text binding is just a one-way channel viewmodel to the DOM.

For example:

<p>login Name: <input data-bind= "Value:username"/></p> <p>password
: <input type= " Password "data-bind=" Value:userpassword "/></p>
<script type=" Text/javascript ">
var ViewModel = {
userName:ko.observable (""),//initially blank
userPassword:ko.observable ("abc"),// Prepopulate
};
</script>

Some details

Main technical Details:

Ko will use the initial value to set the element of value binding. When a new value is available, the initial value will be overwritten
If the value is bound to a monitoring property, then the property value update is reflected on the DOM's value binding, and if it is not a monitoring property, only the first run updates the value binding on the DOM, and then does not change again.

If your value binding is not numeric or character data (such as an object or array), the displayed text content will be equivalent to yourparameter.tostring (). It is best to bind to a value or character type of data.

When a user edits a form control to modify an element value based on a value binding and moves out of focus, KO automatically updates the property values for the corresponding view model, which you can also control by using the Valueupdate event.

Other technical details:

Valueupdate,ko defines a series of change events, most commonly including the following events:

"Input"-<input> or <textarea> element changes update the value of your view model.

"KeyUp"-when the user releases a key to update your view model

"KeyPress"-when the user enters a value to update your view model. Unlike KeyUp, this one will be updated repeatedly.

"Afterkeydown"-when the user starts typing a character to update your view model as soon as possible. This is done by capturing the browser's KeyDown event and handling the event asynchronously. This

Events may not work on some mobile clients.

Valueallowunset, applicable to the <select> value binding, other elements do not work, please refer to the following Note 2.

Note 1: Live updates

If you want to update <input> or <textarea> to your view model in real time, you can use TextInput binding. Specific textinput details will be mentioned later in the chapter.

NOTE 2: Drop-down list <select> Bindings

Ko in drop-down list bindings, you need to use the value binding and the options binding (the options binding will be mentioned in a later section).

Using Valueallowunset and <select> elements

Select a country:

Source:

<p>
Select A country:
<select data-bind= "options:countries,
optionscaption: ' Choose one ... ',
value:selectedcountry,
valueallowunset:true "></select>
</p>
<script type=" Text/javascript ">
var viewModel = {
countries: [' Japan ', ' Bolivia ', ' New Zealand '],
selectedcountry: Ko.observable (' Latvia ')
};
</script>

There are many times when we want the Drop-down list to contain an element that is either blank or not contained in the data collection, such as choose one ..., so you can use Valueallowunset:true to bring it to the end. As in the example above.

Selectedcountry retains the Latvia and matches the white space in the Drop-down list to it.

Note 3: Binding monitoring properties and non-monitoring properties

If you are using value to bind to a monitoring property, Ko is able to establish a two-way binding.

However, if the value binding is a non-monitoring property, KO does the following:

If you refer to a simple attribute, that is, it is just a normal attribute in your view model, KO sets the initial state property value of the form element when the form element is edited.

For example:

The value:
Hello
The Value:hello
Second Value:
Hello, again.
Second Value:hello, again
Third value:
True

Source:

<p>first value: <input data-bind= "Value:firstvalue" ></p>
<p>first Value:<span Data-bind= "Text:firstvalue" ></span></p>
<!--one-way binding. Populates textbox; Syncs only from TextBox to model. -->
<p>second Value: <input data-bind= "Value:secondvalue" ></p>
<p>second Value: <span data-bind= "Text:secondvalue" ></span></p>
<!--No binding. Populates textbox, but doesn ' t react to any changes. -->
<p>third Value: <input data-bind= "Value:secondValue.length > 8" ></p>
<script Type= "Text/javascript" >
var viewModel = {
firstValue:ko.observable ("Hello"),//observable
SecondValue: "Hello, again"//Not observable
};
Ko.applybindings (Viewmodel,document.getelementbyid ("EQ2"));
</script>

The above is a small set to introduce the Knockoutjs 3.X API Fourth chapter of the form value binding, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!