JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/f/delorean/master/dist/delorean.min.js"></script>
<script src="http://flightjs.github.io/release/latest/flight.min.js"></script>
<div>
<div id="total">Total: <span>0</span></div>
<button id="increase">Increase</button>
</div>
JavaScript
var Flux = DeLorean.Flux;
// Store
var IncrementStore = Flux.createStore({
actions: {
'increase': 'increaseTotal'
},
scheme: {
total: 0
},
increaseTotal: function () {
this.set('total', this.state.total + 1);
}
});
// Dispatcher
var IncrementDispatcher = Flux.createDispatcher({
increase: function () {
this.dispatch('increase');
},
getStores: function () {
return {
increment: IncrementStore
};
}
});
// Action Generator
var IncrementActions = {
increase: function () {
IncrementDispatcher.increase();
}
};
// Component
var IncrementView = flight.component(function () {
this.render = function () {
console.log(IncrementDispatcher.getStore('increment'));
this.$node
.text(IncrementDispatcher.getStore('increment').total);
};
this.after('initialize', function () {
IncrementDispatcher.on('change:all', this.render.bind(this));
});
});
var IncrementButtonView = flight.component(function () {
this.handleIncrease = function () {
IncrementActions.increase();
};
this.after('initialize', function () {
this.on('click', this.handleIncrease);
});
});
$(function () {
IncrementView.attachTo('#total span');
IncrementButtonView.attachTo('#increase');
});