Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/janl/hoodie-plugin-reactive
- Owner: janl
- Fork: true (alanshaw/hoodie-plugin-reactive)
- Created: 2014-08-05T15:05:11.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2013-11-22T08:52:18.000Z (about 11 years ago)
- Last Synced: 2024-04-07T01:27:42.731Z (9 months ago)
- Homepage: https://npmjs.org/package/hoodie-plugin-reactive
- Size: 224 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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.