Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JsRender Fundamentals: Templating for HTML5 Applications

JsRender Fundamentals: Templating for HTML5 Applications

This is a JsRender Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to build web applications with JsRender. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

John Papa

April 02, 2012
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. @JOHN_PAPA @JOHN_PAPA

  2. @JOHN_PAPA

  3. @JOHN_PAPA

  4. @JOHN_PAPA         

  5. @JOHN_PAPA var i = 1; $(movies).each(function () { var movie

    = this; $("#movieContainer").append( "<div>" + i++ + ": " + movie.name + " (" + movie.releaseYear + ")</div>"); });
  6. @JOHN_PAPA

  7. @JOHN_PAPA

  8. @JOHN_PAPA $("#myContainer").html( $("#movieTemplate").render(movies) ); <script id="movieTemplate" type="text/x-jsrender"> <div>{{:name}}</div> <div>Year Released:

    {{:releaseYear}}</div> </script> <div id="myContainer"></div>
  9. @JOHN_PAPA

  10. @JOHN_PAPA Var tmplString = "<div>{{:firstName}}</div>"; var myTmpl = $.templates(tmplString); htmlString

    = myTmpl.render(myData); $("#myDiv").html(htmlString); var htmlString = $("#myTmpl").render(myData); $("#myDiv").html(htmlString);
  11. @JOHN_PAPA

  12. @JOHN_PAPA {{for employees}} <li class="rating {{:firstName}}"> </li> {{/for}}

  13. @JOHN_PAPA

  14. @JOHN_PAPA {{if expression1}} ... {{/if}} {{if expression1}} {{else expression2}} {{/if}}

    {{if val1 !== val2}} ... {{/if}} {{: (val1> val2) ? "this" : "that"}}
  15. @JOHN_PAPA

  16. @JOHN_PAPA      

  17. @JOHN_PAPA @JOHN_PAPA