Harness jQuery Templates and Data Link

Harness jQuery Templates and Data Link

• 1.
  Harnessing jQuery Templatesand Data Linkto build dynamic data-driven browser appsBoris Moore
• 2.
  jQuery Templates andData Linking todayjQuery Templates:https://github.com/jquery/jquery-tmplOfficial plugin – to be ‘owned’ by jQuery UI teamjQuery Data Linkhttps://github.com/jquery/jquery-datalinkMajor revision under wayMoving towards full integration with templatesPreview at end of presentation
• 3.
  What do youuse templates for?Harness data, and easily build rich, maintainable, responsive, interactive browser apps…Why? (scenarios)Examples:Movies sampleImage OrganizerSample Viewer
• 4.
  Scenarios using dataand templatesRead-only rendering (you may not ‘own’ the data)Data from JSON or JSONP servicesPlus interactivityDifferent views of dataNavigation through dataInteractive dynamic UI is driven by data too. (App state…)Special case: Interactive client apps with local data onlyYou own the dataData from serverMay do initial rendering on server (server-side templates?)Opens the way to progressive enhancement/unobtrusive JavaScriptRound-tripping of dataNow the UI is not just to navigate data, but also to modify data and send changes back to server
• 5.
  Drill-down of currentfeatures:What you need for read-only rendering…Demos:Rendering Templates: .tmpl();Tags: Content: ${}, {{html}}, {{if}}, {{else}}, {{each}}Javascript in templates: ExpressionsFunctionsTags: Composition{{tmpl}}, {{wrap}}
• 6.
  Drill-down of currentfeatures:Adding interactivityDemos:.tmplItem()Accordionplus {{tmpl}} tagRecursive Tree Viewplus {{wrap}} tagTabs view
• 7.
  jQuery Templates tomorrowWhatpeople wantLessAPI to return HTML as stringRendering performanceSmallMoreInteractivity with less code to writeContextData linkingResponsive UI Client-side user experienceInteractive performanceEditable data with direct binding to templated UIRemote templatesMore features - index, isLast, default values…
• 8.
  Answer – give‘less’: JQuery Templates ‘core’….render() – returns HTML string:No built-in interactivity support No .tmplItemNo data linkingNo DOM dependencyPure string concatenationCould run on serverAll the same template tags and same JavaScript expression support…FasterSmaller$( "#movieList" ).html( $( "#movieTemplate" ).render( movies ););
• 9.
  … andgive ‘more’: JQuery Templates ‘interactive views’ (JsViews)Full data link: object or html <-> object or htmlPass in map(s) as options – drill into objects through path, and html through selectorsOr just handle callbackOr use declarative data linkingand…
• 10.
  … andgive ‘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 lessand more: Data Link plus Templates (JsViews)Preview code at https://github.com/borismoore/jsviewsDemos:Less: Render StringSimple insertion in DOM or rendering from serverMore: Data Linked Master-DetailData Linking between objectsMore: DataLink - Templates IntegrationDeclarative data linkingEditable data, for roundtripping
• 12.
  ReferencesjQuery Templates:https://github.com/jquery/jquery-tmpl/ JsViews:https://github.com/borismoore/jsviews/Blog http://www.borismoore.com/