JQuery Data Linking an association between objects and properties of objects (1/2)

The ASP tutorial the. NET team has recently submitted a technology called data linking to the jquery community, and data linking can help you implement the relationship between objects and objects--and the other side changes as one side changes.
Support for client-side data binding

The ASP.net tutorial team also recently submitted a technology called "data linking" to the jquery community, and data linking can help you implement an association between objects and objects--the other side changes as one party changes. Convenient implementation of the data displayed in the page and real data objects in real-time synchronization of data.

The data linking is close to the data-binding theory (we used the name of the data linking because the Bing () method is already included in jquery, although this method has nothing to do with data binding ... ）。

Now let's see how the data linking should be used. Suppose you have a page with two <input> elements on the page, as follows:

Image

We then associate these two input elements with a corresponding attribute of a JavaScript object called contact, through the following page effect code:

Image

When this code executes, the contact object's Name property value will be the value of the first INPUT element. Similarly, the value of the property phone is paid to the second INPUT element with the ID phone. As a result, the contact object's attributes and input elements of the mapping relationship is also established.

Because the properties of the contact object are bound to the INPUT element, when you access the page, the value of the Contact property will be displayed in two text boxes, respectively:

Image

Also, when the contact object's property value changes, the value in the input element that is bound to the property changes automatically.

In this way, we can programmatically modify the value of the contact object's properties by using the attr () method in jquery, as follows:

Image

The values in this associated INPUT element are also automatically updated (we do not need to do any work here):

Image

Note that the attr () method in jquery has been used to update the property values of the contact object. To ensure that the data linking works properly, you must use the method in jquery to modify the property values.

Bidirectional binding

The above implementation is a JavaScript object to HTML elements of one-way data binding, in order to achieve two-way data binding, you need to use the Linkboth () method.

For example, the following code adds a client-side JavaScript click-handling event for a BUTTON element. When the button is clicked, a warning window pops up and displays the value of the contact object's property in the window:

Image

The following shows what happens when you modify the value in the name input box in the page and click the Save button. Notice that the input box and the corresponding property values in the contact object have changed:

Image

The above is just a simple demo that uses a JavaScript warning bullet window to display the property values of the contact object. Imagine that we can also call a Web-service to save the object in a database tutorial. The advantage of doing this is that it allows you to focus on your data without bothering to keep the data synchronized with the UI.

Converters

In data linking we also support a feature known as the Converters (converter). The converter can easily convert data to the value of a connection property.

Suppose we want the value of the phone property of the contact object to be output in plain digits (without "-" or "()"). In this case, we can convert the values in the INPUT element to the style we want to display by building the converter:

Image

Home 1 2 last page