client-side templating in jquery

[ SXSW Bios ] #sxsw #jquerytmpl (Archive)


This session will review the options available today and in the future for client-side templating in jQuery. We will show the libraries available today, including jQuery Templates, knockout.js, and JsRender/JsViews.The past year has been rather tumultuous in the jQuery Templating space. Before the jQuery Templates plug-in even had a chance to come out of beta, the project was terminated in favor of newer templating libraries currently under development. However, even though it is still unclear which templating library is the best to use, the concept of client-side templating is too important to ignore or put off using. This talk will review the various options Web developers have today for performing client-side templating, and will present guidance on what to look for in the coming year as newer libraries are released.


Most of this presentation was hands-on coding.

John Resig had a micro-templating idea. Comparison of current client-side template engine projects.

There is a power for loading data that will be manipulated within the interface by user action. Templates also let you chunk your interface into manageable, re-usable pieces.

jQuery Templates (plugin on hold; look for jQuery UI core addition)

  • DOM-based (can be inefficient for large blocks of HTML).
  • Variable placeholder syntax: ${Variable}
  • $.tmpl(dataobject)

jsRender (templating model)/jsViews (activates in DOM for jQuery and data linking)

  • String-based that gets injected into DOM as single chunk of HTML (more efficient).
  • Variable placeholder syntax: {{:variable}}
  • $.render(dataobject)


Download the code: