JQuery Data Linking the association of properties between objects and objects

Support for client-side data binding

Asp. NET team has 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:

We then associate the two input elements with a corresponding attribute of a JavaScript object called contact in the following JavaScript code:

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:

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:

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

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:

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:

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 to the database. 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:

Notice how the above converter converts the values of the binding parties and passes to the Linkfrom () method. When the value in the INPUT element is synchronized to the phone property of the contact object, the converter automatically filters out characters other than the number. In other words, if you enter (206) 555-9999 in the phone input box of the page, the value in the Phone property of the contact object will be 2065559999:

The above demo is to remove the format, of course, you can also use the converter in turn. For example, a string that defines a phone number format and displays the value of the attribute after it has been formatted.

Combined use of templating and data linking technology

We hope that by adopting the templating and data linking technology, it will make it easier for developers to use jquery to develop Web site projects involving data display and processing. Templating can easily be used Ajax asynchronous way to obtain data records in the desired manner, data linking for us to solve the page display and object properties of the data synchronization and update problems.

At present, we are working to implement an extension of the data linking technology to enable it to support declarative data connections (declarative). So that you can use the template technology to display data more easily using linking to achieve a better development experience.

For example, we use a template like the following to display an array of product objects:

Note {link name}} and {{link price}}, which associate the span label with the properties of the Product object. Currently, the Jquert template allows users to use custom commands to extend the data synchronization methods that come with the template. Here, we use a method called "link" to extend the default data synchronization function of the template.

The advantage of the above template using data linking is that when the "product" Object data changes, the contents of the span label displayed on the page are automatically synchronized and displayed. Declarative data connections also make it easier for us to create, edit, and insert forms. For example, using a declarative data connection, you can create a form to edit the "Product" object in the following ways.

When you use the template technique and data linking to make the association declaration, when you modify the value in the page INPUT element, the properties of the JavaScript object associated with the element also change synchronously. This eliminates the hassle of having to write code manually to synchronize the object with the data display, which also helps us write more concise client code.