Templating is a difficult problem in web technology.  There has always been this elusive desire to separate code logic from design logic, but most options end up falling short of that goal.  In my opinion, the biggest problems are Conditionals and Loops, which generally result in some manifestation of code littered between HTML.  My goal for this project is to create a fully featured templating engine that fits entirely within standard HTML.

The templating engine will be built in Javascript.  It will use JSON data and a snippet of “template HTML” to generate the desired HTML to be rendered.  However, it will not use the token approach that jQuery’s .tmpl() plugin employs.  Instead, it will rely on CSS selectors.

My initial thought is that the JSON data will be an object whose key’s correlate to IDs in the template HTML.  For example:

Template HTML:

<div id="myDiv" class="jtpl"></div>

 

JSON Data:

{"myDiv":"Content for my div"}

 

Rendered HTML:

<div id="myDiv">Content for my div</div>

 

This is the most basic example.  I simply found the ID and replaced the HTML value.  Here’s something a bit more complex:

Template HTML:

<div id="myDiv" class="jtpl">
  <p>
    This is another example<br />
    <img class="img1" />
  </p>
  <a></a>
</div>

 

JSON Data:

{"myDiv":{
  "class":"divClassA divClassB",
  "selectors":{
    "a":{
      "href":"/page",
      "html":"Link to my page"
    },
    ".img1":"/imagePath.jpg"
  }
}}

 

Rendered HTML:

<div id="myDiv" class="divClassA divClassB">
  <p>
    This is another example<br />
    <img class="img1" src="/imagePath.jpg" />
  </p>
  <a href="/page">Link to my page</a>
</div>

 

Certainly a bit more complicated, but still a realistic solution that I think is handled pretty nicely.  If a string is passed through, it replaces the the innerHTML for all elements except img, which replaces the src attribute.  If you want more detailed modification, you can pass through an object whose keys map to an attribute, except special keys “html” and “selectors”.  Selectors are CSS selectors to do further modification within the base match.

As I stated before, I think the real difficulty in creating an elegant solution is handling Loops and Conditionals.  This is where the “jtpl” class comes in, which tells my templating engine that the id represents a conditional.  Check out this example:

Template HTML

<div class="if-myDiv">
  <div id="myDiv" class="jtpl">
    <p>
      This is a conditional example<br />
      <img class="img1" />
    </p>
    <a></a>
  </div>
</div>
<div class="unless-myDiv">
  <p>Data for myDiv was not returned</p>
</div>

 

JSON Data Option 1:

{"myDiv":{
  "class":"divClassA divClassB",
  "selectors":{
    "a":{
      "href":"/page",
      "html":"Link to my page"
    },
    ".img1":"/imagePath.jpg"
  }
}}

 

Rendered HTML Option 1:

<div class="if-myDiv">
  <div id="myDiv" class="divClassA divClassB">
    <p>
      This is another example<br />
      <img class="img1" src="/imagePath.jpg" />
    </p>
    <a href="/page">Link to my page</a>
  </div>
</div>

 

JSON Data Option 2:

{}

 

Rendered HTML Option 2:

<div class="unless-myDiv">
  <p>Data for myDiv was not returned</p>
</div>

 

And that’s Conditionals.  If the id comes through, you show the elements with the class  “if-{id}” and remove the elements with the class “unless-{id}”.  If it doesn’t, you show the “unless-{id}” and remove the “if-{id}”.

I haven’t thought enough about Loops yet, but it will be something involving arrays.  IE: If an array comes through for an id, you simply repeat the element for each item in the array, and run the replacements with the array item.

I like to think this solution is something that wouldn’t confuse an HTML/CSS guy too much if he needed to make some adjustments to a template, and is also a straightforward solution for “backend” developers to work with.  Would love to hear your thoughts.