Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Simple reactive mustache based templating for hoodie using ractive.js
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Build Status Dependency Status devDependency Status

browser support


Simple reactive mustache based templating for hoodie using ractive.js.

Create a mustache template, and pass it as a parameter to hoodie.reactive along with the DOM element to attach the template to, and a function that retrieves data from the for the template to render. For example:

var html = '<ul>{{#todos}}<li>{{title}}</li>{{/todos}}</ul>'

hoodie.reactive($('#todolist'), html, function (store) {
  var defer = hoodie.defer()

  store.findAll('todo').done(function (todos) {
    todos.sort(function (a, b) {
      return a.createdAt > b.createdAt ? -1 : a.createdAt < b.createdAt ? 1 : 0
    defer.resolve({todos: todos})

  return defer.promise()

When you add, update or remove todos from the the DOM will automatically update to reflect your changes.


Use hoodie.reaction to setup a reaction function that is run when it's dependencies on documents change - for when you need to perform non-DOM based computations.

hoodie.reaction(function (store) {
  store.findAll("things").done(function (done) {
    // Do some d3, plot some points on a LeafletJS map, drawn on a canvas
    // etc. etc.

Custom stores

If you want to use a store other than, a punk store for example, you can pass it to hoodie.reactive or hoodie.reaction:

hoodie.reactive($('#todolist'), html, function (punkStore) {
  // punkStore.findAll... etc.
}, {store: hoodie.punk})

hoodie.reaction(function (punkStore) {
  // punkStore.findAll... etc.
}, {store: hoodie.punk})

Multiple stores

If you need to use multiple stores to find your data for your template or reaction then pass an array:

hoodie.reactive($('#todolist'), html, function (store, punkStore) {
  // store.find, punkStore.findAll... etc.
}, {store: [, hoodie.punk]})

hoodie.reaction(function (store, punkStore) {
  // store.find, punkStore.findAll... etc.
}, {store: [, hoodie.punk]})

Using stores

The function you pass to hoodie.reactive or hoodie.reaction must use the store(s) passed in as parameter(s) in order for the magic to work. The store(s) passed to your function wrap or whatever custom store(s) you specify and if you don't use them the "magic" won't work.

Something went wrong with that request. Please try again.