https://github.com/jasonmayes/handlebars-helper

A helper component to make it super easy to use handlebars templates in a re-usable manner. Instead of defining script tags inline in your HTML to define templates you can instead write "template files" which will be bought in using AJAX.
https://github.com/jasonmayes/handlebars-helper

Last synced: 2 months ago
JSON representation

A helper component to make it super easy to use handlebars templates in a re-usable manner. Instead of defining script tags inline in your HTML to define templates you can instead write "template files" which will be bought in using AJAX.

• Host: GitHub
• URL: https://github.com/jasonmayes/handlebars-helper
• Owner: jasonmayes
• Created: 2015-01-26T16:02:48.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-26T19:08:05.000Z (almost 10 years ago)
• Last Synced: 2024-03-18T13:44:18.381Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 146 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# handlebars-helper

A lightweight helper component to make it super easy to use handlebars templates in a re-usable manner across different pages.

Instead of defining script tags inline in your HTML to define templates you can instead write "template files" which will be bought in using AJAX only when required.

Even better, these are then cached in the JS layer so any subsequent calls do not result in further fetches.

## Example... Before (without this helper)...

Previously a handlebars template would look something like this:

```html

Blah blah blah


  <div class="entry">

    <h1>{{title}}</h1>

    <div class="body">

      {{body}}

    </div>

  </div>



```

And then some JavaScript to actually render it would be something like this:

```javascript

  var source   = document.getElementById('entry-template').innerHTML;

  var template = Handlebars.compile(source);

  var out = template ({title: "Hello", body: "This is a lot of work"});

  document.getElementById('outputHere').innerHTML = out;

```

## Example... After (with this helper)...

Using HandlebarsHelper, we can now simplify this to:

```html

Blah blah blah



```

And then some JavaScript to actually render it would be something like this:

```javascript

  var jsonData = {

    title: 'Hello',

    body: 'This is much simpler!'

  };

  handlebarsHelper.populateTemplate('outputHere', 'templates/page.template', jsonData);

```

## Advantages

1. Enables easy reuse of templates across multiple files.

2. Keeps the HTML simpler and less "messy".

## Disadvantages

1. Requires one server side fetch for each template file you create if you use it on a page.