hoodie-plugin-reactive

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 hoodie.store 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 hoodie.store the DOM will automatically update to reflect your changes.

Reaction

Use hoodie.reaction to setup a reaction function that is run when it's dependencies on hoodie.store 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 hoodie.store, 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.store, hoodie.punk]})
 
hoodie.reaction(function (store, punkStore) {
  // store.find, punkStore.findAll... etc.
}, {store: [hoodie.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 hoodie.store or whatever custom store(s) you specify and if you don't use them the "magic" won't work.