delorean.js
Advanced tools
Comparing version 0.4.5 to 0.4.7
{ | ||
"name": "delorean.js", | ||
"version": "0.4.5", | ||
"version": "0.4.7", | ||
"homepage": "http://deloreanjs.com", | ||
@@ -5,0 +5,0 @@ "authors": [ |
{ | ||
"name": "delorean.js", | ||
"version": "0.4.5", | ||
"version": "0.4.7", | ||
"description": "Flux Library", | ||
@@ -5,0 +5,0 @@ "main": "dist/delorean.min.js", |
@@ -13,3 +13,3 @@ ![DeLorean Logo](https://raw.githubusercontent.com/f/delorean/master/asset/delorean-logo.png) | ||
- Makes the data is more consistent in your whole application, | ||
- Too easy to use with React; just add a mixin, | ||
- Too easy to use with **React**; just add a mixin, | ||
- Too easy to use with **Flight.js** | ||
@@ -20,68 +20,5 @@ - Too small, just **13K**. | ||
[You can try it](http://jsfiddle.net/fkadev/a2ms7rcc/) | ||
[Try **React.js** example on JSFiddle](http://jsfiddle.net/fkadev/a2ms7rcc/) | ||
[Try **Flight.js** example on JSFiddle](http://jsfiddle.net/fkadev/1cw9Leau/) | ||
```javascript | ||
/** @jsx React.DOM */ | ||
var Flux = DeLorean.Flux; | ||
// Store | ||
var IncrementStore = Flux.createStore({ | ||
actions: { | ||
'increase': 'increaseTotal' | ||
}, | ||
total: 0, | ||
increaseTotal: function () { | ||
this.total++; | ||
this.emit('change'); | ||
}, | ||
getState: function () { | ||
return { | ||
total: this.total | ||
}; | ||
} | ||
}); | ||
var incrementStore = new IncrementStore(); | ||
// 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 = React.createClass({ | ||
mixins: [Flux.mixins.storeListener], | ||
render: function() { | ||
return <div> | ||
<div>Total: {this.stores.increment.store.total}</div> | ||
<button onClick={this.handleIncrease}>Increase</button> | ||
</div>; | ||
}, | ||
handleIncrease: function () { | ||
IncrementActions.increase(); | ||
} | ||
}); | ||
React.renderComponent(<IncrementView dispatcher={IncrementDispatcher} />, document.body); | ||
``` | ||
--- | ||
@@ -88,0 +25,0 @@ |
936487
391