jQuery Templates and data bindingNow and in the future

MattMilnerInstructor and consultant

Session Contents• jQuery Templates• Data-Link• jsRender and jsViews• Combining binding and templates• Futures

Microsoft and jQuery

Ajax client library + jQuery’s meteoric rise to popularity• Shift in focus

MS contributes to jQuery• Templates• data-link• Globalization

jQuery TemplatesjQuery PluginAvailable on MS CDNDownload from jquery.com

Client-side template engineSupport for collections or single objectsConditional evaluation

Available in beta . . . butjQuery team has stopped work on this line of codeSee jsRender

Simplify rich user interface creation

Markup focused templates for javaScript

Available template tags

${} – an expression or field

{{if}} and {{else}} – conditional output

{{each}} – iterate over array elements

{{tmpl}} – invoke another template

{{html}} – use literal (aka unencoded) HTML data

{{wrap}} – wrap another template which includes HTML

jQuery Data-LinkjQuery PluginAvailable on MS CDNDownload from jquery.com

Client-side databinding“Binds” javaScript objects to form inputs“Bind” javaScript object to another object

Available in beta . . . butjQuery team has stopped work on this line of codeSee jsViews

Simplify object editing

Html and JavaScript binding

jsRenderString-based client templatesExtremely fastNo jQuery dependencyAvailable on GitHub

Available in beta soonjQuery team currently planning on using for templating

Simplify rich user interface creation

Markup focused templates for javaScript

jsRender template tags

{{= }} – an expression or field

{{= !} – unencoded output (e.g. html){{if}} and {{else}} – conditional output{{each}} – iterate over array elements

jsViewsClient-side databindingDeclarative binding syntax

<input type=“text” data-from=“[Description]” data-to=“[Description]” />Available on GitHub

Available in beta soonjQuery team contemplating using

Simplify model focused development on the client

HTML and JavaScript databinding

Session Summary• jQuery Templates and Data-link in use now• Declarative templates and data-binding for the

client • jsRender and jsViews have betas coming shortly

Calls to action• Get started with templates and linking today• Watch jsRender and jsViews for advancement• Check out knockoutjs or other frameworks for MVVM

Q&A

Be what’s next• Find everything here

http://aka.ms/mbl-tech• Visual Studio Developer Preview Downloads

http://aka.ms/mbl-tech/devprev• MSDN HTML5 Developer Center

http://aka.ms/mbl-tech/html5

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.