jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins

The jQuery library has a passionate community of developers, and it is now the 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’d be including it in new versions of Visual Studio going forward. By default, when you create new ASP.NET Web Forms and ASP.NET MVC projects with VS 2010, the core jQuery library is now automatically added to your project.

Earlier this year at the MIX 2010 conference I announced that Microsoft would also begin contributing code to the jQuery project.  During one of my keynotes, John Resig -- the creator of the jQuery library – joined me on stage and talked a little about our participation and discussed an early prototype of a new client templating API for jQuery. 

I later blogged more details about the jQuery Templates plugin, jQuery Data Link plugin, and jQuery Globalization plugin that the ASP.NET team has been working on in conjunction with the jQuery team and jQuery community. We’ve had a lot of requests from ASP.NET customers looking to enable this type of functionality. We followed the standard jQuery open source model and posted prototypes of the plugins to Github.com, participated in the jQuery forums, and incorporated design feedback from the community.

Official jQuery Plugins

Today, I am happy to make a joint announcement with the jQuery team that the jQuery project has accepted these three plugins (jQuery Templates, jQuery Data Link, and jQuery Globalization) as official jQuery plugins.

As official jQuery plugins, the plugins will be maintained as part of the jQuery project.  Starting today, you can download these plugins by visiting the jQuery website. The documentation for these plugins is also now integrated within the official jQuery documentation site.

Furthermore, in the next major release of jQuery (jQuery 1.5), the jQuery Templates plugin will be included as a standard part of the core jQuery library.  This means that the “jQuery Templates” functionality will be included in the jQuery.js file.  And it means that developers will be able to take advantage of a standard templating library and syntax when working with jQuery.

Learning More

You can learn more about the plugins by watching the following Web Camps TV episode hosted by James Senior with Stephen Walther:

Web Camps TV #5 - Microsoft Commits Code to jQuery!

Below is additional information (and links to the official documentation on jQuery.com) for the three plugins:

jQuery Templates

The jQuery Templates plugin enables you to create client templates. For example, you can use the jQuery Templates plugin to format a set of database records that you have retrieved from the server through an Ajax request.

You can learn more about jQuery templates by reading my earlier blog entry on jQuery Templates and Data-Linking or by reading the documentation about it on the official jQuery website. In addition, Rey Bango, Boris Moore and James Senior have written some good blog posts on the jQuery Templates plugin:

When the next major version of jQuery is released -- jQuery 1.5 -- jQuery Templates will be included as a standard part of the jQuery library.

jQuery Data Link

The jQuery Data Link plugin enables you to easily keep your user interface and data synchronized. For example, you can use the Data Link plugin to automatically synchronize the input fields of an HTML product form with the properties of a JavaScript product object.

You can learn more about the Data Link plugin by reading my previous blog entry on jQuery Templates and Data-Linking. The documentation for the Data Link plugin is also now live at the official jQuery website.

jQuery Globalization

The jQuery Globalization plugin enables you to use different cultural conventions when formatting or parsing numbers, dates and times, calendars, and currencies. The Globalization plugin has information on over 350 cultures. You can use this plugin with the core jQuery library or plugins built on top of the jQuery library.

You can learn more about the jQuery Globalization plugin by reading my previous blog entry on the jQuery Globalization plugin.

Summary

My team is excited to participate and contribute to the jQuery project. We hope these three plugins make it easier for all web developers to build great sites and applications.  We’ve made good progress the last few months, and are looking forward to making new announcements concerning jQuery in the future.

You can learn even more about today’s announcement from the jQuery team’s blog post about it.

Hope this helps,

Scott

P.S. In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu

55 Comments

  • Hah, I only just decided to start using tmpl yesterday - it must be fate.

  • This is all obviously in preparation for client-side editable tables and finally doing-away with the "EditRow" concept. I just wish it had happened a few years ago. Good stuff.

  • This is simply amazing. Awesome job!

  • I'm already using jQuery templates on my ASP.NET site: www.charlyapp.com

    It works GREAT!! I'm happy to see it's going to be implemented into jQuery standard. Also, the Globalization is something I want! I'm always heaving trouble with date / time display formats and timezone differences!

  • I love that you are all pushing and contributing to jQuery more and more --it gives me fodder to try and sway all my python friends over to C# = )

  • Very nice! I've used some templating libraries before, but this looks very promising

  • Yes, Jquery is cool, and addition such plugins is awesome.

  • woow good for jquery, microsoft and us developers!

  • This is great. This is finally getting ASP.NET MVC similar in binding to Silverlight. I have to work between the two as I design, create, and build out applications in both. I cant wait till this supports intellisense too and allows me to build my entire View Page from this and just bind to the Model that you send from the controller. That would make this rock for MVC3 (maybe by tying the page to a different class to trigger this rendering?)

  • I am already using these templates! This is a great news :) way to go MS.

  • Since these three are jQuery plugins, that means that developers will be able to contribute patches and pull requests via the normal jQuery mechanisms correct? :)

  • @Peter,

    >>>>>> Thanks to the team for enhancing this already wonderful and much needed JavaScript library! Just reporting a dead link: jQuery Templates in the wild (www.jamessenior.com/.../jquery-templating-in-the-wild)

    Thanks for spotting that - that link is now live!

    Thanks,

    Scott

  • @John,

    >>>>>>> This is all obviously in preparation for client-side editable tables and finally doing-away with the "EditRow" concept

    You'll see us use this functionality in a variety of ways. Improving client side data scenarios (including with controls) is one of the places we think these plugins will be very useful.

    Thanks,

    Scott

  • @Scott Koon,

    >>>>>>>> Since these three are jQuery plugins, that means that developers will be able to contribute patches and pull requests via the normal jQuery mechanisms correct? :)

    Yes - developers will be able to contribute patches and pull requests via the normal jQuery mechanisms. We've already migrated our Github repositories for these plugins to github.com/jquery and we will shut down ours.

    Hope this helps,

    Scott

  • Will these plugins be added to the Microsoft Ajax CDN?

  • This is all great news, but will we ever see VS 2008 intellisense support for the current library, 1.4.2? It was quite frustrating to see the support stop at 1.4.1.

  • @Nathan,

    >>>>>>>>Will these plugins be added to the Microsoft Ajax CDN?

    Yes - we'll definitely host them there.

    Thanks,

    Scott

  • @Adam,

    >>>>>> This is all great news, but will we ever see VS 2008 intellisense support for the current library, 1.4.2? It was quite frustrating to see the support stop at 1.4.1.

    I'm following up with the team to understand what the latest status is on that. I'll post another comment once I know for sure.

    Thanks,

    Scott

  • Congratulations. This is a positive development indeed.

  • When would one want to use jQuery templating over doing templating on the server in MVC by returning a PartialView using ajax?

  • Has anyone else had problem with jQuery templates and the IE9 beta? Kind of frustrating...

    This page has a short test sample that works in all other browsers...

    http://staff.knox.edu/jstevens/ie9test.html

  • That's some great news Scott!

    I now Wonder how to make SEO indexable site using this, since using JQuery and WebServices is so temptating.

  • Great Work...this will help formatting data so much easier.

  • @Carlos,

    >>>>>>> When would one want to use jQuery templating over doing templating on the server in MVC by returning a PartialView using ajax?

    Mostly this comes down to weather you want to perform client-updates on the data/information and/or if retrieving the data is faster than retrieving the HTML rendered from it.

    Returning a PartialView via AJAX is definitely still appropriate when you want to return HTML and incrementally update part of a page. But if you want to return data that you can sort/filter/modify then returning the data as JSON or XML and then using client-side templates and data linking provide more flexibility.

    Hope this helps,

    Scott

  • @bravestarr,

    >>>>>>>> Has anyone else had problem with jQuery templates and the IE9 beta? Kind of frustrating...

    I checked with the team. This bug should be fixed in the current version of the Templates plugin at http://github.com/jquery/jquery-tmpl -- we had to add a workaround for IE 9.

    Hope this helps,

    Scott

  • A few years ago I thought about switching fields and moving to a Java focus for my career. MVC pulled me back and it is this new focus (working with the OSS community) that has locked me into being a .NET developer. I really like the direction MS Dev is taking things.

  • The same approach should have taken Microsoft in the MVC area. Instead of "inventing" its own MVC platform, it should have gone with Castle Monorail. Either buy it and further enhance it or just integrate the asp view engine.

  • In a previous blog you showed how to use the templates and the linking plugins together. Is this still supported? I didn't see any explanations on this in the documentation, or in the links provided.

  • Is there any way to combine templating and datalinking? Like in the deprecated ajax DataView control.

  • No jQuery 1.4.2-vs-doc yet. When can we expect it? I'm tired of pulling down the old one and renaming it.

    The news about official adoption of the plugins is a "nice to have", but there are still some "must haves" like v-doc files for the latest jQuery that need to be given higher priority.

  • Ok, I'm at a complete loss here. I want to put my templates in an external file, but I can't get this plugin to recognize any templates unless they are declared inline on my main page. That's just not clean to me.

  • This is a great set of plugins, I would like to use them soon. However, the first thing that came to my mind was how do you rollback? say you have attached an html element to an object, and the user has made changes. Now, after making the changes, s/he clicks on the cancel button, the object is already altered, can we say undo the changes without having to cache the object before hand?

  • I totally agree with AC regarding unified client/server views. I would like a single template format that can be used on both sides of the wire - I am working on something right now that would benefit from using jQuery templates but I also require server-side rendering. Currently that means I'd need to duplicate the template in two different formats and that just leads to inconsistencies...

  • Great.....

  • Hi Scott, semi-related: what is the future of the ASP.NET AJAX Control Toolkit? Is the project being worked on / officially supported within MS? I am using WebForms and find it generally good, but a bit clunky in parts.

    Thanks

  • this is all very interesting, but at this point it would require maintaining two types of templating: one at server side for initial page render, and this at client side for ajax updates. are there any plans on building a server side parser for these templates as well so that code is only written once but populated either at server side or at client side (much like using XSLT on XMLs either at server side or at client side)?

  • The templating plugin is absolutely brilliant. I just gave it a quick run outputting hierarchical data - a task I've had to implement quite a lot in a project just last week - and it's so easy.

    Given some data:
    var node = { name:'blah', children: [{name:'blah2', children:...}]}

    // nodeTemplate:
    ${name} {{each children}} {{tmpl($value) "#nodeTemplate"}} {{/each}}

    HTML removed for brevity (and just incase it's removed). Recurses perfectly.

  • Thats great.
    Would have been nice (and saved my past 2 hours!) to have flagged this is for jQuery 1.4.3 up - which ISNT RELEASED YET!
    the temnplate stuff seems fine, but data linking wont work on 1.4.2 (for me)
    and linking to the github for 1.4.3 breaks a ton of other plugins (ie dialog) - fair enough, it's not ready - but maybe add an update in your intro about this??

  • Just ran performance tests for latest $.tmpl (from Git repo) against other templating plug ins and rather seriously disappointed in $.tmpl performance.

    I used the benchmark set distributed with jQote and see its rendering engine outperforms $.tmpl by 4600% (not 46%. 4600%, or 46 times faster.)

    I like the meta language used by $.tmpl. It's a breeze to use, but I'd take the speed over "pretty" templating meta-language any time.

    In light of promised inclusion of $.tmpl into jQuery 1.5, makes me wonder, why include dog-slow engine in top-notch JS lib?

  • No jQuery 1.4.2-vs-doc yet. When can we expect it? I'm tired of pulling down the old one and renaming it.

  • Scott, I can see the value of this easily enough. Just sending over the values and letting the script handle the HMTL will be drastically smaller than returning data and the html when dealing with Ajax calls.

    The only problem I can really see with this is that it doesn't appear to be very search engine friendly. I mean that search engines (at least as far as I know) don't read stuff outputted from JavaScript. Is this still the case?

  • WOOO! Thanks for this scott.

  • Will they change jQuery UI to use the new Globalization plugin? I'm very keen to use it with the DatePicker...

  • Its Awesome, keep it going Scott.

  • Along with Adam's question, now that jQuery 1.4.3 is out, can we please get intellisense ASAP? It would be nice if these were released simultaneously. Thanks a bunch, love the work you are doing.

  • Please post the example of declarative linking combining jQuery templates and data link! Based on your March announcement, this is the recommended migration path from MSAJAX Client Templates for those of us who were early adopters. We really want to make the jump, but without declarative template linking, many of the complex scenarios we currently have working would require days and days of manual (and unmaintainable) linkage coding. Also, I am hopeful that the declarative linking will support automatic and efficient updating of nested templates, something that the Contact Demo indicates is not really easy/possible with the base templating plugin.

    We have been developing a client-centric approach to our consulting and product development for over a year now, and I can truly say that the combination of .NET and MVC on the server, and rich client-templating and binding on the client is a joy to work with and makes me excited again about developing applications for the web!

  • Hi Scott,
    jQuery Templates are nice. It will be great to have something like this in .NET (especialy with the same syntax). It could be sth like that:
    string result = string.Template(template, myData);
    or
    var template = new Template(template);
    string result = template.Render(myData);

  • verry nice post, thanks.

  • Hi Scott,
    It would be nice if Visual Studio could still parse my templates in the IDE as HTML, so we could the same color-coding and HTML tag completion when working within a block.

  • Hi Scott, can you clarify how jQuery templates and Razor compare, or can live together? I don't think I can catch two different directions...
    Thanks

  • Thank you and your team for your hard work this is truly another step in the right direction for MS. Now if IE9 could be release I would be super happy!

  • This whole tempting stuff is nasty, and brings in yet another 'language' for us to use... Language number 3 or 4, with server code, JavaScript, jquery and now this. And for what reason? People render partials from the server as in mvc or panels in web forms. So whats the point of any of this? I cannot get excited about it, I just think of the developer talent used up to code something which adds little value at a high cost (bad syntax, extra language, horrid maintainability, no compile time checking, etc), when that talent could have been used to do more... Check out Steven sandersons knockout framework, unobtrusively keeps two way data in sync. Can use that instead.

  • This whole tempting stuff is nasty, and brings in yet another 'language' for us to use... Language number 3 or 4, with server code, JavaScript, jquery and now this. And for what reason? People render partials from the server as in mvc or panels in web forms. So whats the point of any of this? I cannot get excited about it, I just think of the developer talent used up to code something which adds little value at a high cost (bad syntax, extra language, horrid maintainability, no compile time checking, etc), when that talent could have been used to do more... Check out Steven sandersons knockout framework, unobtrusively keeps two way data in sync. Can use that instead.

  • Just few months ago I wrote a library that looks very similar to jQuery Templates. I used the EcmaScript Template syntax. The template code is not embedded within the page but is downloaded from the server in background after the library has been initialized.



  • The Knockout library looks terrific, but why is there so much code in attributes? Isn't that back to the way styling was done in attributes? Haven't we all learned that you should use CSS stylesheets? The same applies to javascript. Inline javascript is soooo year 2000 DHTML. Someone says Knockout is unobtrusive? Really? Give the markup to your designer and see what happens when they unobtrusively change javascript code.

    Data links looks interesting. No support for collections as far as I can tell. Backbone, another lightweight library, is a step in the right direction but it feels rigid. Can't wait to see what more comes out of all this. Exciting times.

Comments have been disabled for this content.