A simple loading tool for Handlebarjs Templates
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
lib
test
README.md

README.md

Loadr

A simple tool for loading external Handlebars.js templates at runtime

Use

Installation

Download the latest version of loader.js from the lib directory. Optionally also include the loader.css file, which sets all <include> tags and <div class="dispNone"> to display:none;

Downloading a template

The key to getting loadr to download on page load is to include this in the page

$(document).ready(Loader.load)

Example

To download a template at page load, set it up like this:

<html>
  <head>
    <title>Loadr Tests</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <link rel="stylesheet" href="/path/to/loader.css"/>
    <script src="/path/to/loader.js"></script>
    <script src="/path/to/handlebars.js"></script>
    <include source="test-template.bars.html" onDownload="testLoadr()" id="test"></include>
  </head>
  <body>
    <h1>Hello</h1>
    <div id="content"></div>
    <script>
	//Function caled when the template is downloaded
	function testLoadr() {
		renderName( "Freddie" )
		renderName( "James" )
	}		
	//Renders the template with a specific name
	function renderName (name) {
		Loader.renderTemplateAppend("#test", "#content", {name:name})
	}	
	//Download all templates when the page has loaded
	(document).ready(Loader.load)
    </script>
  </body>
</html>