Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Harness jQuery Templates and Data Link

Presentation at jQuery Conference, April 2011

  • Login to see the comments

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 /><br />Official plugin – to be ‘owned’ by jQuery UI team<br />jQuery Data Link<br /><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<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 /> <br />JsViews:<br /><br />Blog <br /><br />