Templates

Templates

Templates let you instruct Treesaver to add dynamic information to the Chrome, a Grid or other elements of the page. The replaced information can come from the contents index (e.g. a property of an article) or can be dynamically computed by Treesaver (e.g. the current page number).

Syntax

Treesaver templates use the Mustache syntax; please see the available documentation for an overview.

Variables are grouped within a few different contexts. To replace the value of a variable into an element, you first need to select the context by specifying it in a data-ts-template. In the next example, the context is position:

    <span data-ts-template="position">Page {{pagenumber}} of {{pagecount}}</span>

If you are going to use the same context repeatedly, you may find it useful to specify the attribute on an ancestor element:

    <div class="toc" data-ts-template="document">
      <h3><a href="{{url}}">{{title}}</a></h3>
    </div>

Available sections and variables

position

The following variables are available:

• pagenumber: the current page number within the current article;
• pagecount: the total number of pages in the current article;
• url: the URL of the current article;
• documentnumber: the position of the current document in the navigation order;
• documentcount: the total number of documents in the publication.

index

This context provides access to the contents index, including all articles in the navigation order.

Given the following example:

  <div class="sidebar">
    <div class="toc" data-ts-template="index">
      {{#contents}}
        {{^hidden}}
          <div class="article">
            <img class="thumb" data-src="{{thumb}}"/>
            <h3><a data-href="{{url}}">{{title}}</a></h3>
            <p class="byline">{{byline}}</p>
          </div>
        {{/hidden}}
      {{/contents}}
    </div>
  </div>

and this contents index:

{
  "contents": [
    {
      "url": "toc.html",
      "hidden": true
    },
    {
      "url": "article-1.html",
      "title": "Article One",
      "thumb": "openroad-thumb.jpg",
      "byline": "John Doe"
    },
    {
      "url": "article-2.html",
      "title": "Article Two",
      "thumb": "river-thumb.jpg",
      "byline": "Jane Doe"
    }
  ]
}

then the <div class="article"> block will be skipped for toc.url (because of its hidden attribute) and emitted once per each of the other articles.

currentdocument

This context provides access to the contents index for the current document.

Example (assuming the same JSON as above):

    <div data-ts-template="document">
        <h1>{{title}}</h1>
        <h2>{{byline}}</h2>
    </div>

See the content-field example for a complete example.

publication

This context provides access to the top-level properties of the contents index.

Example:

    <div data-ts-template="publication">
      {{title}} by {{author}}
    </div>

    {
      "title": "Table of Contents Example",
      "author": "Bram Stein",
      "contents": [
        "index.html",
        "one.html",
        "two.html",
        "three.html"
      ]
    }

See the table-of-contents example for a complete example.