jspeaker edited this page Nov 17, 2012 · 4 revisions
Clone this wiki locally

The simpleJsonTemplate provides simple client-side rendering of JSON data via JavaScript and jQuery.

Template syntax is spark-like. You simply write HTML and add tokens and attributes. Supported tokens and attributes are minimal, as the whole idea is to observe the YAGNI principle.


simpleTemplate class provides a single method:

    simpleTemplate.renderJson(url, data, target, callback)
      url: the path to the template, virtual or fully-qualified. The template file is acquired via Ajax.
      data: the JSON data to render.
      target: the target jQuery object to render the HTML in.
      callback (optional): a callback function to execute when rendering is complete.

#Template: Tokens:

  1. ${YourProperty}: HTML-encodes and renders a property on your JSON object.

Attributes: Note that attributes can be included in HTML elements with HTML-5 compliant data- prefix, or if you prefer, without the data- prefix. The former makes IDEs complain less, the latter is a bit more human-readable.

  1. data-if or if: Condition determines whether the element and child elements are rendered. <ul data-if="YourProperty === 'dolor'"><li>lorem</li><li>ipsum</li></ul>

  2. data-foreach or foreach: The item specifier in a foreach-in loop. This is an arbitrary variable name you choose, like you would use in a typical for-in loop in javascript for (var item in collection). <ul><li data-foreach="item" data-in="Collection">${item.YourItemProperty}</li></ul>

  3. data-in or in: The collection specifier in a foreach-in loop. <ul><li data-foreach="item" data-in="Collection">${item.YourItemProperty}</li></ul>

  4. data-step or step: The step specifier in a foreach-in loop. Causes the collection iterator to step over collection elements. In the following example, given 6 items in the collection, li tags would be rendered for items 1 and 6.

  5. <ul><li data-foreach="item" data-in="Collection" data-step="5">${item.YourItemProperty}</li></ul>

** Example Template **

Given JSON data:

  var model = {
    Name: "Name",
    Stuff: "Some data & stuff with characters that better get encoded! < > ~ ! # $ * ? ",
    Collection: [
      { Id: 1, Stuff: "stuff 1" },
      { Id: 2, Stuff: "stuff 2" },
      { Id: 3, Stuff: "stuff 3" },
      { Id: 4, Stuff: "stuff 4" },
      { Id: 5, Stuff: "stuff 5" },
      { Id: 6, Stuff: "stuff 6" }

Here's a template that includes all simple template syntax:

      <legend>Collection with compound if condition.</legend>
      <ul data-if="Collection.length > 0 && Name != ''">
        <li data-foreach="item" data-in="Collection" id="${Name}_${item.Id}">${Name} ${item.Id} ${item.Stuff}</li>
      <p data-if="Collection.length === 0">
        No items exist in the collection...

And the call to render the HTML in a target div:

  var templateUrl = "./templates/template.html";
  var target = $("<div />");
  simpleTemplate.renderJson(templateUrl, model, target);