Upgrading from 0.9.x to 0.10

Treesaver 0.10.0 is not backward compatible with release 0.9.2 and earlier. When upgrading your JavaScript file, you will have to make changes in three areas:

• resources;
• the index of articles in your publication;
• optionally, the content itself.

Upgrade resources

In Treesaver 0.10 the ad-hoc syntax for "fields" has been replaced by Mustache templates; you need to inspect and update your resources file.

replace data-bind with data-ts-template

Any use of data-bind needs to be replaced by using a container element with the data-ts-template attribute, and then interpolating the appropriate variable.

In Treesaver 0.9.x data-bind had a few predefined values; the following table summarizes the corresponding sections and variables in Treesaver 0.10:

| data-bind | data-ts-template section | variable | | pagenumber | position | pagenumber | | pagecount | position | pagecount | | current-url:href | position | url |

Any other value for data-bind was interpreted as a field on the current article. Treesaver 0.10 extends this idea to provide access to any custom property, which can be declared in the contents JSON. You can then use data-ts-template to access fields on the index (all the articles), the currentarticle or publication

See Templates for details.

For example, if you something like this in your Chrome:

  <div class="chrome">
    <div class="viewer">
    </div>
    <div class="controls">
      <div class="pagewidth">
        <span class="pagenumbers">
          <span data-bind="pagenumber">1</span> /
          <span data-bind="pagecount">5</span>
        </span>
        <button class="prev">Prev</button>
        <button class="next">Next</button>
      </div>
    </div>
  </div>

you can replace it with:

  <div class="chrome">
    <div class="viewer">
    </div>
    <div class="controls">
      <div class="pagewidth">
        <span data-ts-template="position">{{pagenumber}} / {{pagecount}}</span>
        <button class="prev">Prev</button>
        <button class="next">Next</button>
      </div>
    </div>
  </div>

or perhaps, if you need inner spans for styling:

  <div class="chrome">
    <div class="viewer">
    </div>
    <div class="controls">
      <div class="pagewidth">
        <span data-ts-template="position">
          <span class="pagenumber">{{pagenumber}}</span> /
          <span class="pagecount">{{pagecount}}</span>
        </span>
        <button class="prev">Prev</button>
        <button class="next">Next</button>
      </div>
    </div>
  </div>

The syntax for attributes is also simplified:

  <a data-href="http://twitter.com/?status={{$url$}}">Tweet</a>

Upgrade the index

Treesaver 0.9.2 and earlier allowed you to specifiy the order of contents by adding HTML5 microdata attributes to the markup of the Table of Contents page. That is no longer supported.

In Treesaver 0.10.0 the article order needs to be specified explicitly; you will need to create a JSON file and reference it from your content files. You need to extract the attributes from our HTML, and turn them info JSON properties. When you're done, you can safely remove the microdata attributes.

See Article Order for more details on the contents JSON file.

A simple example:

  {
    "contents": [
      {
        "url": "index.html",
        "hidden": true
      },
      {
        "url": "one.html",
        "title": "Article One",
        "thumb": "openroad-thumb.jpg",
        "byline": "John Doe"
      },
      {
        "url": "two.html",
        "title": "Article Two",
        "thumb": "river-thumb.jpg",
        "byline": "Jane Doe"
      }
    ]
  }