Harness jQuery Templates and Data Link

6,672 views
6,503 views

Published on

Presentation at jQuery Conference, April 2011

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,672
On SlideShare
0
From Embeds
0
Number of Embeds
198
Actions
Shares
0
Downloads
94
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Harness jQuery Templates and Data Link

  1. 1. Harnessing jQuery Templates and Data Linkto build dynamic data-driven browser apps<br />Boris Moore<br />
  2. 2. jQuery Templates and Data Linking today<br />jQuery Templates:<br />https://github.com/jquery/jquery-tmpl<br />Official plugin – to be ‘owned’ by jQuery UI team<br />jQuery Data Link<br />https://github.com/jquery/jquery-datalink<br />Major revision under way<br />Moving towards full integration with templates<br />Preview at end of presentation<br />
  3. 3. What do you use templates for?<br />Harness data, and easily build rich, maintainable, responsive, interactive browser apps…<br />Why? (scenarios)<br />Examples:<br />Movies sample<br />Image Organizer<br />Sample Viewer <br />
  4. 4. Scenarios using data and templates<br />Read-only rendering (you may not ‘own’ the data)<br />Data from JSON or JSONP services<br />Plus interactivity<br />Different views of data<br />Navigation through data<br />Interactive dynamic UI is driven by data too. (App state…)<br />Special case: Interactive client apps with local data only<br />You own the data<br />Data from server<br />May do initial rendering on server (server-side templates?)<br />Opens the way to progressive enhancement/unobtrusive JavaScript<br />Round-tripping of data<br />Now the UI is not just to navigate data, but also to modify data and send changes back to server<br />
  5. 5. Drill-down of current features:What you need for read-only rendering…<br />Demos:<br />Rendering Templates: <br />.tmpl();<br />Tags: Content: <br />${}, {{html}}, {{if}}, {{else}}, {{each}}<br />Javascript in templates: <br />Expressions<br />Functions<br />Tags: Composition<br />{{tmpl}}, {{wrap}}<br />
  6. 6. Drill-down of current features:Adding interactivity<br />Demos:<br />.tmplItem()<br />Accordion<br />plus {{tmpl}} tag<br />Recursive Tree View<br />plus {{wrap}} tag<br />Tabs view<br />
  7. 7. jQuery Templates tomorrowWhat people want<br />Less<br />API to return HTML as string<br />Rendering performance<br />Small<br />More<br />Interactivity with less code to write<br />Context<br />Data linking<br />Responsive UI <br />Client-side user experience<br />Interactive performance<br />Editable data with direct binding to templated UI<br />Remote templates<br />More features - index, isLast, default values…<br />
  8. 8. Answer – give ‘less’: JQuery Templates ‘core’…<br />.render() – returns HTML string:<br />No built-in interactivity support <br />No .tmplItem<br />No data linking<br />No DOM dependency<br />Pure string concatenation<br />Could run on server<br />All the same template tags and same JavaScript expression support…<br />Faster<br />Smaller<br />$( "#movieList" ).html( <br /> $( "#movieTemplate" ).render( movies );<br />);<br />
  9. 9. … and give ‘more’: JQuery Templates ‘interactive views’ (JsViews)<br />Full data link: <br />object or html <-> object or html<br />Pass in map(s) as options – drill into objects through path, and html through selectors<br />Or just handle callback<br />Or use declarative data linking<br />and…<br />
  10. 10. … and give ‘more’: JQuery Templates ‘interactive views’ (JsViews)<br />Integrates jQuery templates and Data Link:<br />‘Activates’ template-rendered content: views, and ‘sub-views’(was tmplItem)<br />Observable objects and arrays: <br />Views (tmplItems) “listen” to observable changes on the data!<br />$( "#movieList" ).html( <br /> $( "#movieTemplate" ).render( movies );<br />)<br />.dataLink( movies );<br />var index = $.view( element ).index;<br />function setMovieTitle( index ) {<br /> $.setField( movies[index], "Title", "NewTitle" );<br />}<br />function deleteLastMovie() {<br /> $.changeArray( movies, "pop" );<br />}<br />
  11. 11. Preview of less and more: Data Link plus Templates (JsViews)<br />Preview code at https://github.com/borismoore/jsviews<br />Demos:<br />Less: Render String<br />Simple insertion in DOM or rendering from server<br />More: Data Linked Master-Detail<br />Data Linking between objects<br />More: DataLink - Templates Integration<br />Declarative data linking<br />Editable data, for roundtripping<br />
  12. 12. References<br />jQuery Templates:<br />https://github.com/jquery/jquery-tmpl/ <br />JsViews:<br />https://github.com/borismoore/jsviews/<br />Blog <br />http://www.borismoore.com/<br />

×