jquery template Technology and data binding implementation code _jquery

The good news is that Microsoft has developed such a framework, an extension of jquery, from which the data returned by the server-side Web service will be dynamically displayed on the browser as easily as using server-side controls to display data.

This technique is called the jquery templates and data linking, which is an extension of Microsoft's jquery. This extension requires the official jquery audit before it can be included in jquery. According to ScottGu's blog, this extension is awaiting the audit phase. But these features are very powerful and practical, and I turned it around first, sneak peek.

When writing AJAX applications, it is often necessary to use JavaScript to display data on the page, jquery templates (jquery template) and data binding Linking provides a convenient way to display JavaScript data on an HTML page that can be rendered as a variety of elements, such as plain text, TextBox, list, and so on. Data linking the word literal should be used as a link, but I think the word data binding is more reflective of the technology's capacity and conforms to the ASP.net idiom. In Scott Guthrie's blog, too, they also wanted to call the technology data binding rather than data linking, but since jquery already has the term binding, it means something else, in order not to cause confusion, So I had to give it another name, called data linking.

I turn this blog down here, and have time to translate it.

The following Full-text quotes from ScottGu's blog.

JQuery Templates and Data linking (and Microsoft contributing to jQuery)

The JQuery Library has a passionate community of developers, and it's now most widely used JavaScript library on the Web today.

Two years ago I announced that Microsoft would begin offering product support for JQuery, and that we are including it in New versions of Visual Studio going forward. By default, then you create new asp.net the Web Forms and asp.net MVC projects with VS. ll find JQuery automatically a Dded to your project.

A few weeks ago during my second keynote in the MIX conference I announced that Microsoft would also begin Contributi  Ng to the JQuery project. During the talk, John Resig-the creator of the jquery library and leader of the jquery developer team–talked a little About our participation and discussed a early prototype of the a new client templating API for JQuery.

In this blog post, I am going to talk a little about how I am team are starting to contribute to the JQuery project, and Discu SS Some of the specific features that we are working on such as Client-side templating and data linking (data-binding).

Contributing to JQuery

JQuery has a fantastic developer community, and a very open way to propose suggestions and make contributions. Microsoft is following the same process to contribute to jQuery as any of the community.

As a example, when working with the jquery community to improve support for templating to jQuery my team followed the fol Lowing steps:

1. We created a proposal for templating and posted the proposal to the JQuery Developer Forum (http://forum.jquery.com/topic/ Jquery-templates-proposal and Http://forum.jquery.com/topic/templating-syntax).
2. After receiving feedback on the forums, the JQuery team created a prototype for templating and posted the prototype at the Github code Repository (HTTP://GITHUB.COM/JQUERY/JQUERY-TMPL).
3. We iterated on the prototype, creating a new fork on Github of the templating prototype, to suggest design improvements. Several the community also provided design feedback by forking the templating code.

There has been a amazing amount of participation by the JQuery community into response to the original templating (Posts in the JQuery Forum), and the "the" templating proposal has evolved significantly based on Communi Ty feedback.

The jquery team are the ultimate determiner on what happens with the templating Proposal–they might include it in jquery  Core, or make it a official plugin, or reject it entirely. My team are excited to being able to participate in the open source process, and make suggestions and contributions the same W Ay as any of the community.

JQuery Template Support

Client-side templates enable JQuery developers to easily generate and render HTML UI on the client. Templates support A simple syntax This enables either developers or designers to declaratively specify the HTML they  To generate. Developers can then programmatically invoke the templates on the client, and pass JavaScript objects to them to make the C  Ontent rendered completely data driven. These JavaScript objects can optionally is based on the data retrieved from a server.

Because the JQuery templating proposal is still evolving into response to community feedback, the final version might look V Ery different than the version below. This blog post gives your a sense of how can I try out and use templating as it exists today (you can download the Protot Ype by the "JQuery core team" at Http://github.com/jquery/jquery-tmpl or the latest submission from my team at Http://github . Com/nje/jquery-tmpl).

JQuery Client Templates

You create client-side jQuery templates by embedding content within a <script type= "text/html" > tag. For example, the HTML below contains a <div> template container, as ok as a client-side jQuery "Contactte Mplate "Template (within the <script type=" text/html "> Element) that can is used to dynamically display a list of CO Ntacts:

The {{= name}} and {{= phone}} expressions are used within the contacts template above to display the names and phone num Bers of "Contacts" objects passed to the template.

We can use the template to display either an array of JavaScript objects or a single object. The JavaScript code below demonstrates how can render a JavaScript array of ' contact ' object using the above template. The render () method renders the ' data into a string and appends the ' Contactcontainer ' DIV element:

When the "page is loaded", the list of contacts is rendered by the template. All of this template rendering are happening on the client-side within the browser:

Templating Commands and Conditional Display Logic

The current templating proposal supports a small set of template commands-including if, else, and each statements. The number of template commands is deliberately kept small to encourage people to place over complicated logic of Their templates.

Even this small the set of template commands is very useful. Imagine, for example, which each contacts can have zero or more phone numbers. The contacts could is represented by the JavaScript array below:

The template below demonstrates can use the if and all template commands to conditionally DISPL Ay and loop the phone numbers for each contact:

If a contacts has one or more phones numbers then each of the phones numbers is displayed by iterating through the phone numb ERs with the template command:

The JQuery team designed the "template commands so" they are extensible. If you have a need for a new template command then your can easily add new template commands to the default set of commands .

Support for Client data-linking

The ASP.net team recently submitted another proposal and prototype to the JQuery forums (Http://forum.jquery.com/topic/pro Posal-for-adding-data-linking-to-jquery). This proposal describes a new feature named data linking. Data linking enables you to link a property of one object to a another object-so  Changes the other property changes. Data linking enables you to easily keep your UI and data Objects synchronized a page.

If you are are familiar with the concept of data-binding then you are familiar with data linking (in the proposal, we call The feature data linking because JQuery already includes a bind () method, which is has nothing to do with data-binding).

Imagine, for example, that's you have a page with the following HTML <input> elements:

The following JavaScript code links the two INPUT elements above to the properties of a JavaScript ' contact ' object that H As a "name" and "Phone" property:

property, and the value of the second INPUT element (#phone) are set to the "the" Contact phone property. The properties of the contact object and the properties of the INPUT elements are also linked–so which changes to one are Also reflected in the other.

Because the contact object was linked to the INPUT element, and you request the page, the values of the contacts properties are displayed:

More interesting, the values of the linked INPUT elements'll change automatically whenever you update the properties of The contact object they are linked to.

For example, we could programmatically modify the properties of the ' contact ' object using the jQuery attr () meth OD like below:

Because we two input elements are linked to the "Contact" object, the INPUT element values would be updated automatically (without us has to write no code to modify the UI elements):

That we updated the Contacts object above using the JQuery attr () method. In order for data linking to work, you must use JQuery methods to modify the property values.

Two Way linking

The Linkboth () method enables two-way data linking. The Contacts object and INPUT elements are linked in both directions. When you modify the value of the INPUT element, the Contacts object is also updated automatically.

For example, the following code adds a client-side JavaScript click handler to a HTML button element. When you click on the button, the property values of the contact object are displayed using an alert () dialog:

The following demonstrates what happens when your change the value of the Name INPUT element and click the Save button. Notice that the name of the ' contact ' object, the INPUT element is linked to is updated automatically:

The above example is obviously trivially simple. Instead of displaying the new values of the contact object with a JavaScript alert, can imagine Instead calling a web- Service to save the object to a database. The benefit of data linking is this it enables to focus on your data and frees your from the mechanics of keeping UI and data in sync.

Converters

The current data linking proposal also supports a feature called . A converter enables to easily convert the value of "a property during data linking."

For example, imagine so you want to represent phone numbers in a standard way with the ' contact ' object Phone property. In particular, you don ' t want to include special characters such as ()-in the phone number-instead and only want digits And nothing else. In so case, you can wire-up a converter to convert the value of ' an ' INPUT element into this format using the code below:

Notice above how a converter function was being passed to the Linkfrom () method used to link the "Phone" con Tact "object with the value of the" phone INPUT element.  This convertor function strips any non-numeric characters from the INPUT element before the ' phone property. Now, if you enter the phone number (206) 555-9999 into the phone input field then the value 2065559999 are assigned to the Phone property, the contact object:

can also use a converter in the opposite direction also. For example, the can apply a standard phone format string when displaying a phone number from a to phone property.

Combining templating and Data linking

Our goal in submitting this two proposals for templating and data linking are to make it easier to work with data when Bui Lding websites and applications with JQuery. Templating makes it easier to display a list of database records retrieved ' a database through ' Ajax call. Data linking makes it easier to keep the data and user interface in sync for update scenarios.

Currently, we are working on a extension of the data linking proposal to support declarative data linking. We want to make it easy to take advantage of the data linking when using a template to display data.

For example, imagine and are using the following template to display an array of product objects:

Notice the {{link name}} and {{link price}} expressions. These expressions enable declarative data linking between the SPAN elements and properties of the product objects. The current JQuery templating prototype supports extending it syntax with custom template commands. In this case, we are extending the default templating syntax with a custom template command named "link".

The benefit of using data linking with the above template are that the SPAN elements'll be automatically updated  The underlying "product" data is updated. Declarative data linking also makes it easier to create edit and insert forms. For example, your could create a form for editing a product by using declarative the data linking like this:

Whenever you change the value of the INPUT elements in a template that uses declarative data linking, the underlying Javas Cript data object is automatically updated. Instead of needing to write code to scrape the HTML form to get updated values, you can Instead work with the underlying D ATA directly–making your client-side code much cleaner and simpler.

Downloading Working Code Examples of the Above scenarios

You can download this. zip file to get with working code examples the above scenarios. The. zip file includes 4 static HTML page:

• Listing1_templating.htm–illustrates Basic Templating.
• Listing2_templatingconditionals.htm–illustrates templating with the the ' if ' and each template commands.
• Listing3_datalinking.htm–illustrates data linking.
• Listing4_converters.htm–illustrates using a converter with data linking.

You can un-zip the "file to" File-system and then run each page to the concepts in action.

Summary

We are excited to is able to begin participating within the Open-source JQuery project. We ' ve received lots of encouraging feedback in response to my our a two proposals, and we'll continue to actively contr  Ibute going forward. These features'll hopefully make it easier the for all developers (including ASP.net developers) to build great Ajax Applica tions.

Hope this helps,
JQuery Template and data binding demo code