Harness jQuery Templates and Data Link

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

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

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

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

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}}

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

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…

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 );
);

… 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…

… 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" );
}

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

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

http://lanyrd.com	189
http://paper.li	2
http://v4.tibi.vn	1
http://tibi	1

Harness jQuery Templates and Data Link

by BorisMoore on Apr 17, 2011

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 193

Statistics

Harness jQuery Templates and Data Link Presentation Transcript