mixin and helpers for declarative and reactive developing.
- Named property triggered .set, .change events when set value
- Can use setter, getter, checker handlers
- Can be set handler on value change
- Isomorphic - work in tags and any observable objects
- ...
<timer>
<p>Seconds Elapsed: { time }</p>
this.mixin('property')
this.property('time', opts.start || 0, this.update)
tick() {
this.time++ // Auto call update() when this.time changed
}
var timer = setInterval(this.tick, 1000)
this.on('unmount', function() {
clearInterval(timer)
})
</timer>Creating property in riot tag
this.property(name, [value], [onchange | options])Creating property in observable object
riot.property(observer, name, [ value ], [ onchange | options ])Creating properties
// in riot tag
this.properties(values, [ onchange | options ])
// in observable object
riot.properties(observer, values, [ onchange | options])name- property namevalue- property initialisation whith this valueonchange- callback function called when property value changeobserver- riot observable objectvalues- propertiesnameandvalueand the keys and values that are kept in objectoptions- object with optional keyssetter,getter,checker,onchange,onset
Initialisation of mixin
this.mixin('property')Creating property by name and optional init value
this.property('time', 0)Listening property events {property_name}.{event_type}
this.on('time.set', function (value) {...})
this.on('time.change', function (value) {...})
this.on('time.check', function (value) {...})Listening events of all properties object *.{event_type}
this.on('*.set', function (name, value) {...})
this.on('*.change', function (name, value) {...})
this.on('*.check', function (name, value) {...})Creating many properties
this.properties({
data: {},
time: Date.now(),
counter: 0
})Setting options of property
this.property('time', 0, {
setter: function (value) { return value / 1000 },
getter: function (value) { return value * 1000 },
checker: function (value) { return value < 0 },
// callbacks
onchange: function () { this.update() },
onset: function () { this.save() },
})Setting property to observable object by riot.property
function Store() {
if (!(this instanceof Store)) return new Store()
riot.observable(this)
riot.property(this, 'data', [])
this.on('data.set', function(data) {
this.save(data)
})
...
}
var store = new Store()
store.data = [1,2,3] // trigger data.set eventPreventing auto trigger event onchange when property changed
this.preventOnchange = true
// onchange callback not run
this.time++
this.preventOnchange = false