diff --git a/es6.md b/es6.md index 58a041679..18db7bcc4 100644 --- a/es6.md +++ b/es6.md @@ -105,6 +105,9 @@ import Express from 'express'; // aka: indent = require('...').indent import { indent } from 'helpers'; + +// aka: indent = require('...').indentSpaces +import { indentSpaces as indent } from 'helpers'; ``` ### Module exports @@ -199,6 +202,16 @@ class Circle extends Shape { } ``` +### [For..of iteration](http://babeljs.io/docs/learn-es6/#iterators-for-of) + +``` +for (var i of iterable) { + // ... +} +``` + +Works for Arrays and iterables (eg, generators). + ## Experimental Available via 6to5's experimental mode diff --git a/flux.md b/flux.md new file mode 100644 index 000000000..0acd6b026 --- /dev/null +++ b/flux.md @@ -0,0 +1,115 @@ +--- +title: Flux +layout: default +--- + +## Architecture + +You have: + +* __Dispatchers__ receive *actions* that get dispatched to its listeners. + +* __Stores__ are objects that store data, usually changed from a dispatcher listener. + +* __Views__ are React components that listen to Store changes, or emit *actions* to the dispatcher. + +## Dispatcher + +A dispatcher emits (`.dispatch()`) events to its listeners (`.register(fn)`). + +```js +var Dispatcher = require('flux').Dispatcher; + +d = new Dispatcher() + +// send a message +d.dispatch({ a: 'aaa', ... }; + +// receive +token = d.register(function (payload) { + payload.a === 'aaa' +}) +``` + +### Ensuring order + +You can ensure one listener is fired after another using `.waitFor()`. + +```js +token1 = d.register(...); + +token2 = d.register(function (payload) { + // ensure receiver 1 is fired before this + // can only be used within register(...) + d.waitFor([ token1 ]) +}) +``` + +### Subclassing + +`Object.assign` is the preferred way to subclass Dispatcher (think `$.extend`). + +You can make *action creators*, which are shortcuts for `dispatch()`. + +```js +var Dispatcher = require('flux').Dispatcher; +var assign = require('object-assign'); + +var AppDispatcher = assign({}, Dispatcher.prototype, { + + // shortcut for dispatching + handleViewAction: function (action) { + this.dispatch({ + source: 'VIEW_ACTION', + action: action + }) + } + +}) +``` + +## Stores + +Stores are just like objects. + +```js +var TodoStore = { todos: {} }; +``` + +## Stores and dispatchers + +Make Dispatcher and Stores: + +```js +d = new Dispatcher(); +TabStore = { tab: 'home' }; +``` + +Dispatch events to alter the store: + +```js +d.dispatch({ event: 'changeTab', tab: 'timeline' }); + +d.register(function (data) { + if (data.event === 'changeTab') { + TabStore.tab = data.tab; + } +}); +``` + +## With Components + +Components can listen to Dispatchers. + +```js +var TodoApp = React.createClass({ + componentDidMount: function () { + AppDispatcher.register(...); + } +}); +``` + +### Also see + +* [Dispatcher API](http://facebook.github.io/flux/docs/dispatcher.html#content) +* [React](react.html)