/reactive-handlebars

A miniature library to update handlebars templates reactively.

Primary LanguageJavaScript

reactive-handlebars

A miniature library to update handlebars templates reactively.

Handlebars is one of the most popular templating engines. Complicated UIs, data visualizations, and systems of calculations are examples of just a few problems where organising code becomes really hard while updating the templates on change.

See this Demo

Read this article

How can reactive-handlebars simplify your templates ?

  • Updating variables will update their values where used in DOM.
  • Maximizing separation of concern and providing clean and declarative way of organizing the code.
  • Observing the data passed to the template through observers. (If the listeners are set on object keys that are passed to the template).
  • Abstraction over asynchronous HTTP calls by setting promises to the templates.

Getting Started

Install

bower install reactive-handlebars

npm install reactive-handlebars

Dependencies

  • jquery
  • lodash.js
  • handlebars.js

Usage

Counter Example

Initialise
let counter = new ReactiveHbs({
    container: '.mount',
    template: '#tpl',
    data: {
      count: 0
    }
 
});
Helpers
counter.helpers({
    multiplyByTwo() {
        return counter.get('count') * 2;
    }
});
Events
counter.events({
    'click [name="increment-count"]': (e, elm, tpl) => {
        tpl.set( 'count', tpl.get('count') + 1 );
    }
});
Observers
counter.reactOnChange('count', { throttle: 100 }, (tpl) => {
    console.log('count have been changed ', tpl.get('count'));
});

// turn the observer off when not needed
counter.stopReactOnChange('count');

Next Steps

Check out these examples in the wild