Home

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.

#API:

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:

  <div>
    <h1>${Stuff}</h1>
    <h3>${Name}</h3>
    <fieldset>
      <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>
      </ul>
      <p data-if="Collection.length === 0">
        No items exist in the collection...
      </p>
    </fieldset>
  </div>

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

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