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

    View Slide

  2. @JOHN_PAPA

    View Slide

  3. @JOHN_PAPA

    View Slide

  4. @JOHN_PAPA









    View Slide

  5. @JOHN_PAPA
    var i = 1;
    $(movies).each(function () {
    var movie = this;
    $("#movieContainer").append(
    "" + i++ + ": " + movie.name + " ("
    + movie.releaseYear + ")");
    });

    View Slide

  6. @JOHN_PAPA

    View Slide

  7. @JOHN_PAPA

    View Slide

  8. @JOHN_PAPA
    $("#myContainer").html(
    $("#movieTemplate").render(movies)
    );
    <br/><div>{{:name}}</div><br/><div>Year Released: {{:releaseYear}}</div><br/>

    View Slide

  9. @JOHN_PAPA

    View Slide

  10. @JOHN_PAPA
    Var tmplString = "{{:firstName}}";
    var myTmpl = $.templates(tmplString);
    htmlString = myTmpl.render(myData);
    $("#myDiv").html(htmlString);
    var htmlString = $("#myTmpl").render(myData);
    $("#myDiv").html(htmlString);

    View Slide

  11. @JOHN_PAPA

    View Slide

  12. @JOHN_PAPA
    {{for employees}}


    {{/for}}

    View Slide

  13. @JOHN_PAPA

    View Slide

  14. @JOHN_PAPA
    {{if expression1}} ... {{/if}}
    {{if expression1}}
    {{else expression2}}
    {{/if}}
    {{if val1 !== val2}} ... {{/if}}
    {{: (val1> val2) ? "this" : "that"}}

    View Slide

  15. @JOHN_PAPA

    View Slide

  16. @JOHN_PAPA






    View Slide

  17. @JOHN_PAPA
    @JOHN_PAPA

    View Slide