This document discusses using jQuery Templates and Data Link to build dynamic data-driven browser applications. It describes how jQuery Templates can be used to render templates from data but offers limited interactivity. jQuery Data Link allows binding data to HTML but has no templating. The presentation previews a new approach called JsViews that integrates Templates and Data Link to provide both fast rendering of templates to static HTML strings as well as fully interactive and responsive views through two-way data binding between templates and JavaScript data objects.

1. Harnessing jQuery Templates and Data Linkto build dynamic data-driven browser apps Boris Moore

2. jQuery Templates and Data Linking today jQuery Templates: https://github.com/jquery/jquery-tmpl Official plugin – to be ‘owned’ by jQuery UI team jQuery Data Link https://github.com/jquery/jquery-datalink Major revision under way Moving towards full integration with templates Preview at end of presentation

3. What do you use templates for? Harness data, and easily build rich, maintainable, responsive, interactive browser apps… Why? (scenarios) Examples: Movies sample Image Organizer Sample Viewer

4. Scenarios using data and templates Read-only rendering (you may not ‘own’ the data) Data from JSON or JSONP services Plus interactivity Different views of data Navigation through data Interactive dynamic UI is driven by data too. (App state…) Special case: Interactive client apps with local data only You own the data Data from server May do initial rendering on server (server-side templates?) Opens the way to progressive enhancement/unobtrusive JavaScript Round-tripping of data Now the UI is not just to navigate data, but also to modify data and send changes back to server

5. Drill-down of current features:What you need for read-only rendering… Demos: Rendering Templates: .tmpl(); Tags: Content: ${}, {{html}}, {{if}}, {{else}}, {{each}} Javascript in templates: Expressions Functions Tags: Composition {{tmpl}}, {{wrap}}

6. Drill-down of current features:Adding interactivity Demos: .tmplItem() Accordion plus {{tmpl}} tag Recursive Tree View plus {{wrap}} tag Tabs view

7. jQuery Templates tomorrowWhat people want Less API to return HTML as string Rendering performance Small More Interactivity with less code to write Context Data linking Responsive UI Client-side user experience Interactive performance Editable data with direct binding to templated UI Remote templates More features - index, isLast, default values…

8. Answer – give ‘less’: JQuery Templates ‘core’… .render() – returns HTML string: No built-in interactivity support No .tmplItem No data linking No DOM dependency Pure string concatenation Could run on server All the same template tags and same JavaScript expression support… Faster Smaller $( "#movieList" ).html( $( "#movieTemplate" ).render( movies ); );

9. … and give ‘more’: JQuery Templates ‘interactive views’ (JsViews) Full data link: object or html <-> object or html Pass in map(s) as options – drill into objects through path, and html through selectors Or just handle callback Or use declarative data linking and…

10. … and give ‘more’: JQuery Templates ‘interactive views’ (JsViews) Integrates jQuery templates and Data Link: ‘Activates’ template-rendered content: views, and ‘sub-views’(was tmplItem) Observable objects and arrays: Views (tmplItems) “listen” to observable changes on the data! $( "#movieList" ).html( $( "#movieTemplate" ).render( movies ); ) .dataLink( movies ); var index = $.view( element ).index; function setMovieTitle( index ) { $.setField( movies[index], "Title", "NewTitle" ); } function deleteLastMovie() { $.changeArray( movies, "pop" ); }

11. Preview of less and more: Data Link plus Templates (JsViews) Preview code at https://github.com/borismoore/jsviews Demos: Less: Render String Simple insertion in DOM or rendering from server More: Data Linked Master-Detail Data Linking between objects More: DataLink - Templates Integration Declarative data linking Editable data, for roundtripping

12. References jQuery Templates: https://github.com/jquery/jquery-tmpl/ JsViews: https://github.com/borismoore/jsviews/ Blog http://www.borismoore.com/