cerebral-view-riot
Version:
Connects Riot tags to necessary Cerebral state and signals
44 lines (35 loc) • 1.54 kB
Markdown
*Connects Riot tags to the necessary Cerebral state and signals*
`cerebral-view-riot` gives you a mixin factory. To create the mixin it needs the cerebral controller. When you have the mixin register it with [riot.mixin](http://riotjs.com/guide/#mixins).
```js
import Controller from 'cerebral'
import Model from 'cerebral-model-baobab'
import createMixin from 'cerebral-view-riot'
const controller = Controller(Model({}))
// global mixin - affects all tags directly
riot.mixin(createMixin(controller))
```
All tags now have `this.connectCerebral`. Pass it an object where the keys are property names you want to populate on the tag scope and the values are cerebral state paths.
You reach signals the same way, just pass a second argument object to `connectCerebral`.
```html
<thing-list>
<ul>
<li each={ thing in list } onclick={highlight}>{thing.name}</li>
</ul>
<script>
this.connectCerebral({
list: ['thingsModule', 'list']
}, {
highlight: ['thingsModule', 'highlight']
})
</script>
</thing-list>
```
We now have:
* `this.list`
`connectCerebral` will listen to changes on `controller.get().thingsModule.list`. Whenever it updates `connectCerebral` will repopulate the `this.list` and run `this.update` on the tag.
* `this.highlight`
Referencing `controller.getSignals().thingsModule.highlight`