Association of attributes between jQuery Data Linking objects and objects (1/2)

Asp tutorial. the net team recently submitted a technology called data linking to the jquery community, data linking can help you associate attributes between objects-the other party also changes when one party changes.
Supports client data binding

The asp.net tutorial team recently submitted a technology called "data linking" to the jquery community, data linking can help you associate attributes between objects-the other party also changes when one party changes. The data displayed on the page is synchronized with the data in the actual data object in real time.

The data linking and data-binding theories are very similar (we use the data linking name because jquery already contains the bing () method, although this method has nothing to do with Data Binding ...).

Now let's see how to use data linking. Assume that there is a page with two <input> elements, as shown below:

Image

Then, we associate these two input elements with the corresponding property of a javascript Object called "contact" through the special effect code of the following webpage:

Image

When this code is executed, the name attribute value of the contact object is used as the value of the first input element. Similarly, the value of the property phone will be paid to the second input element whose id is phone. In this way, the contact ing between the properties of the contact object and the input element is also established.

In this example, the attributes of the contact object are bound to the input element. When you access this page, the values of the contact attributes are displayed in two text boxes:

Image

In addition, when the attribute value of the contact object changes, the value in the input element bound to the property automatically changes.

In this way, we can modify the attribute value of the contact object through programming, such as using the attr () method in jquery, as shown below:

Image

In this way, the values in the correlated input element will be automatically updated (we do not need to do any work here ):

Image

It should be noted that, as we used the attr () method in jquery above to update the attribute value of the contact object. To ensure data linking works properly, you must use the method in jquery to modify the attribute values.

Bidirectional binding

The above implementation is one-way data binding from javascript objects to html elements. To achieve two-way data binding, you need to use the linkboth () method.

For example, the following code adds the client javascript click Processing Event to the button element. After you click the button, a warning window is displayed, and the attribute values of the contact object are displayed in the window:

Image

The following shows how to modify the value in the name field on the page and click the Save button. Note that the attribute values in the input box and contact object have changed:

Image

The above is just a simple demonstration. A javascript warning window is used to display the attribute values of the contact object. Imagine we can also call a web-service to save the object to the database tutorial. The advantage of doing so is that it allows you to focus on your data without worrying about how to keep the data synchronized with the ui display.

Converter

In data linking, we also support a feature called converters. The converter can easily convert data when the value of the connection property is set.

Suppose we want the phone attribute value of the contact object to be output in the form of pure numbers (excluding "-" or "()"). In this case, we can build a converter to convert the values in the input element into the style we want to display:

Image1 2