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.

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