Harness jQuery Templates and Data Link
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Harness jQuery Templates and Data Link

on

  • 5,894 views

Presentation at jQuery Conference, April 2011

Presentation at jQuery Conference, April 2011

Statistics

Views

Total Views
5,894
Views on SlideShare
5,695
Embed Views
199

Actions

Likes
2
Downloads
91
Comments
0

4 Embeds 199

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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Harness jQuery Templates and Data Link Presentation Transcript

  • 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/