Your SlideShare is downloading. ×
0
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Harness jQuery Templates and Data Link

5,617

Published on

Presentation at jQuery Conference, April 2011

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
5,617
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
92
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Harnessing jQuery Templates and Data Linkto build dynamic data-driven browser apps<br />Boris Moore<br />
  • 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. 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. 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. 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. 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. 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. 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. … 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. … 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. 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. 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 />

×