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 you’ll find jQuery automatically added to your project. A few weeks ago during my second keynote at
the MIX 2010 conference I announced that Microsoft would also begin contributing 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 an early prototype of a new client templating API for jQuery. In this blog post, I’m going to talk a little about how my team is starting to contribute to
the jQuery project, and discuss 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 other member of
the community. As an example, when working with
the jQuery community to improve support for templating to jQuery my team followed
the following steps: 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 ). 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 ). We iterated on
the prototype, creating a new fork on Github of
the templating prototype, to suggest design improvements. Several other members of
the community also provided design feedback by forking
the templating code. There has been an amazing amount of participation by
the jQuery community in response to
the original templating proposal (over 100 posts in
the jQuery forum), and
the design of
the templating proposal has evolved significantly based on community feedback.
The jQuery team is
the ultimate determiner on what happens with
the templating proposal – they might include it in jQuery core, or make it an official plugin, or reject it entirely. My team is excited to be able to participate in
the open source process, and make suggestions and contributions
the same way as any other member 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 that enables either developers or designers to declaratively specify
the HTML they want to generate. Developers can then programmatically invoke
the templates on
the client, and pass JavaScript objects to them to make
the content rendered completely data driven. These JavaScript objects can optionally be based on data retrieved from a server. Because
the jQuery templating proposal is still evolving in response to community feedback,
the final version might look very different than
the version below. This blog post gives you a sense of how you can try out and use templating as it exists today (you can download
the prototype 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 well as a client-side jQuery “contactTemplate” template (within
the <script type="text/html"> element) that can be used to dynamically display a list of contacts:
The {{= name }} and {{= phone }} expressions are used within
the contact template above to display
the names and phone numbers of “contact” 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 you can render a JavaScript array of “contact” object using
the above template.
The render() method renders
the data into a string and appends
the string to
the “contactContainer” DIV element: When
the page is loaded,
the list of contacts is rendered by
the template. All of this template rendering is 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 was deliberately kept small to encourage people to place more complicated logic outside of their templates. Even this small set of template commands is very useful though. Imagine, for example, that each contact can have zero or more phone numbers.
The contacts could be represented by
the JavaScript array below:
The template below demonstrates how you can use
the if and each template commands to conditionally display and loop
the phone numbers for each contact: If a contact has one or more phone numbers then each of
the phone numbers is displayed by iterating through
the phone numbers with
the each template command:
The jQuery team designed
the template commands so that they are extensible. If you have a need for a new template command then you 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/proposal-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 property of another object - so that when one property changes
the other property changes. Data linking enables you to easily keep your UI and data objects synchronized within a page. If you are familiar with
the concept of data-binding then you will be familiar with data linking (in
the proposal, we call
the feature data linking because jQuery already includes a bind() method that has nothing to do with data-binding). Imagine, for example, that 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 has a “name” and “phone” property: When you execute this code,
the value of
the first INPUT element (#name) is set to
the value of
the contact name property, and
the value of
the second INPUT element (#phone) is set to
the value of
the contact phone property.
The properties of
the contact object and
the properties of
the INPUT elements are also linked – so that changes to one are also reflected in
the other. Because
the contact object is linked to
the INPUT element, when you request
the page,
the values of
the contact properties are displayed: More interesting,
the values of
the linked INPUT elements will 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() method like below: Because our two INPUT elements are linked to
the “contact” object,
the INPUT element values will be updated automatically (without us having to write any code to modify
the UI elements): Note that we updated
the contact 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 contact object and INPUT elements are linked in both directions. When you modify
the value of
the INPUT element,
the contact object is also updated automatically. For example,
the following code adds a client-side JavaScript click handler to an HTML button element. When you click
the button,
the property values of
the contact object are displayed using an alert() dialog:
The following demonstrates what happens when you change
the value of
the Name INPUT element and click
the Save button. Notice that
the name property of
the “contact” object that
the INPUT element was linked to was updated automatically:
The above example is obviously trivially simple. Instead of displaying
the new values of
the contact object with a JavaScript alert, you can imagine instead calling a web-service to save
the object to a database.
The benefit of data linking is that it enables you to focus on your data and frees you from
the mechanics of keeping your UI and data in sync. Converters
The current data linking proposal also supports a feature called converters. A converter enables you to easily convert
the value of a property during data linking. For example, imagine that 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 you only want digits and nothing else. In that 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 is being passed to
the linkFrom() method used to link
the phone property of
the “contact” object with
the value of
the phone INPUT element. This convertor function strips any non-numeric characters from
the INPUT element before updating
the phone property. Now, if you enter
the phone number (206) 555-9999 into
the phone input field then
the value 2065559999 is assigned to
the phone property of
the contact object: You can also use a converter in
the opposite direction also. For example, you can apply a standard phone format string when displaying a phone number from a phone property. Combining Templating and Data Linking Our goal in submitting these two proposals for templating and data linking is to make it easier to work with data when building websites and applications with jQuery. Templating makes it easier to display a list of database records retrieved from a database through an Ajax call. Data linking makes it easier to keep
the data and user interface in sync for update scenarios. Currently, we are working on an extension of
the data linking proposal to support declarative data linking. We want to make it easy to take advantage of data linking when using a template to display data. For example, imagine that you 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 its 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 is that
the SPAN elements will be automatically updated whenever
the underlying “product” data is updated. Declarative data linking also makes it easier to create edit and insert forms. For example, you could create a form for editing a product by using declarative data linking like this: Whenever you change
the value of
the INPUT elements in a template that uses declarative data linking,
the underlying JavaScript 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 data 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 of
the above scenarios.
The .zip file includes 4 static HTML page: Listing1_Templating.htm – Illustrates basic templating. Listing2_TemplatingConditionals.htm – Illustrates templating with
the use of
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
the file-system and then run each page to see
the concepts in action. Summary We are excited to be able to begin participating within
the open-source jQuery project. We’ve received lots of encouraging feedback in response to our first two proposals, and we will continue to actively contribute going forward. These features will hopefully make it easier for all developers (including ASP.NET developers) to build great Ajax applications. 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]
