Libraries

Libraries define multiple Partials that are commonly used together. Libraries are defined in the tmplits.json file. The Partials defined in a Library are referenced using their script ID.

{
    ...
    "pages": [
        ...
    ],
    "libraries":[
        //Libraries do not need a name because the contents 
        //  are accessible via their defined script IDs
        "../componentLibrary/library.handlebars" 
    ]
}

Partials defined in a Library require a <script> tag with an ID and type="text/x-handlebars-template" attribute. The ID is how the Partial is referenced in the system. The type tells Tmplits to load it for use as a Partial, while preventing Handlebars from displaying it on the DOM.

../componentLibrary/library.handlebars

<!--This Partial can be referenced by it's id "helloWorld" -->
<script id="helloWorld" type="text/x-handlebars-template">
  <span> Hello World! </span>
</script>

<!--This Partial can be referenced by it's id "helloMoon" -->
<script id="helloMoon" type="text/x-handlebars-template">
  <span> Hello Moon! </span>
</script>

Usage Example:

{{> helloWorld}}
{{> helloMoon}}

Output:

<span> Hello World! </span>
<span> Hello Moon! </span>

Info

Pages also act as Libraries - the DOM has access to any Partials defined in a Page within:

<script id="[Partial name]"type="text/x-handlebars-template">
   ...
</script>

This makes it easy to define Partials in a Page and use them in the same Page (or anywhere else).