Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/janl/hoodie-plugin-reactive

Simple reactive mustache based templating for hoodie using ractive.js
https://github.com/janl/hoodie-plugin-reactive

Last synced: 3 months ago
JSON representation

Simple reactive mustache based templating for hoodie using ractive.js

Awesome Lists containing this project

README

        

[![Build Status](https://travis-ci.org/alanshaw/hoodie-plugin-reactive.png?branch=master)](https://travis-ci.org/alanshaw/hoodie-plugin-reactive) [![Dependency Status](https://david-dm.org/alanshaw/hoodie-plugin-reactive.png)](https://david-dm.org/alanshaw/hoodie-plugin-reactive) [![devDependency Status](https://david-dm.org/alanshaw/hoodie-plugin-reactive/dev-status.png)](https://david-dm.org/alanshaw/hoodie-plugin-reactive#info=devDependencies)

[![browser support](https://ci.testling.com/alanshaw/hoodie-plugin-reactive.png)](https://ci.testling.com/alanshaw/hoodie-plugin-reactive)

hoodie-plugin-reactive
===
Simple reactive mustache based templating for hoodie using [ractive.js](http://www.ractivejs.org/).

Create a [mustache](http://mustache.github.io/) 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:

```javascript
var html = '

    {{#todos}}
  • {{title}}
  • {{/todos}}
'

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.

```javascript
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](https://npmjs.org/package/hoodie-plugin-punk) for example, you can pass it to `hoodie.reactive` or `hoodie.reaction`:

```javascript
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:

```javascript
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.