How can I create a list on a webpage, where each item is based on a template, using Javascript?

Question

I am creating a page, intended to be used as a GUI control with Awesomium. In this page I want a list, the content of which is controlled by the application at runtime.

Awesomium allows web pages to be rendered to a buffer and, for example, be drawn as the texture of an object in a 3D app, therefore there is no 'server' to run server side code, and communication between the 'GUI' and the application is done almost entirely through Javascript function calls and callbacks.

The list will be made up of a number of <div>s, each one relatively complex, and so I would like to create a template for an entry which can be populated and added to the list.

So far I have been doing something similar to:

    function refresh() {
        contentpane.innerHTML = '';
        var i = 0;
        for (i = 0; i < page.contentlist.length; i++) {
            contentpane.innerHTML += '<div id=\'' + page.contentlist[i] + '\'class="button" onclick=page.callback("clicked",id) > <img src="\screenshot.jpg"/> <label ></label> </div>';
        }
    }

But the more complex my list entries become the more unwieldy this is, so I am thinking there must be a better way.

What is the simplest method, to create a list of templated items within a Javascript function?

Is there anything similar to say, WPF's DataTemplate system that I could use?

Answer 1

Underscore.js has a template engine you could take a look at. You can also put the templates into separate files and load them via ajax when necessary.

Say you have following template:

<script type="text/template" id="tmpl-listentry">
  <div id='<%= content %>' class="button" onclick='page.callback("clicked",id)'>
    <img src="/screenshot.jpg" />
    <label></label>
  </div>
</script>

You can then use it like this after loading it and attaching it to your doc:

function refresh() {
    var i = 0,
        tmplElem = document.getElementById('tmpl-listentry'),
        compiled = _.template(tmplElem.innerHTML);

    contentpane.innerHTML = '';
    for (i = 0; i < page.contentlist.length; i++) {
        contentpane.innerHTML += compiled({content: page.contentlist[i]});
    }
}

Note: Of course you should rather cache your compiled template instead of compiling it on every refresh.

Answer 2

I would suggest something like this templating tool...

Your application should produce JSON data, which you can fetch and show with help of mentioned tool. That way you'll get clean separation of presentation and logic.

An example of generating a list would look like this:

HTML

<table class="playerList">
  <thead>
    <tr>
      <th>Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="player">
      <td>Chloe</td>
    </tr>
  </tbody>
</table>

DIRECTIVE

{
  "tbody tr": {
    "player<-players": {
      "td": "player",
      "td@style": "\"cursor:pointer\"",
      "td@onclick": "\"clickLine(this);\""
    }
  }
}

DATA

{
  "players": [
    "Adrian Meador",
    "Bryan OConnor",
    "Todd Swift",
    "Valerie Paige",
    "Walter Hagelstein",
    "Wendy Leatherbury"
  ]
}

RESULT

Player
Adrian Meador
Bryan OConnor
Todd Swift
Valerie Paige
Walter Hagelstein
Wendy Leatherbury