Extension for using Flux architecture with Backbone instead of ReactJS.
╔════════════╗ ╔════════════════════╗ ╔═══════╗
║ Dispatcher ║──────>║ Models/Collections ║──────>║ Views ║
╚════════════╝ ╚════════════════════╝ ╚═══════╝
^ │
└────────────────────────────────────────────────┘
Via npm
npm install backbone-dispatcher --saveor via Bower
bower install backbone-dispatcher --save var dispatcher = new Backbone.Dispatcher({
actions: ['ACTION_1']
});
// It can also be a Collection
var MyModel = require('./MyModel');
var myModel = new MyModel();
// When ACTION_1 is dispatched, pass the payload for myModel.methodName()
// If doesn't pass the third argument, it will call myModel.ACTION_1()
dispatcher.register('ACTION_1', myModel, 'methodName');
// You can dispatch like this
dispatcher.ACTION_1('Hi, I\'m the payload');
dispatcher.dispatch('ACTION_1', 'Hello!');
// Now you can make your views listen to your store (Model or Collection)-
extend([options]): Static method, let's you extend the Dispatcher (check the examples below). -
createAction(actionName/actionObject[, beforeEmit/actionCallbacks]): Instance method, creates a new action. Callbacks:-
shouldEmit(payload): Returns true if should emit, and false if not. -
beforeEmit(payload, next): Run right aftershouldEmit, pass the changed payload as parameter to next.
-
-
createActions(arrayOfActions): Instance method, receive an array of methods that are passed tocreateAction(). -
dispatch(actionName, payload): Instance method, dispatches an action. -
<actionName>(payload): Instance method, dispatches the action 'actionName'. -
register(actionName, model/collection[, callback]): Makes the model/collections listen toactionName, and will call eithercallback(payload)(if callback is a function), ormodel[callback](payload)/collection[callback](payload)(if callback is a string corresponding to a model/collection's method name) when dispatched. Ifcallbackis not passed, it will be the same asactionName(so amodel[actionName](payload)would be executed). -
registerStore(actionNamesArray, model/collection[, callbacks]): Callsregister(see the line above) for each pair action/callback.callbackscan also be a string or a function: in this case, all the actions will be bound to such unique callback.
var MyDispatcher = Backbone.Dispatcher.extend({
initialize: function() {
console.log('I\'m the constructor here!');
}
});
// You can create actions in the constructor
var dispatcher = new MyDispatcher({
actions: [
'action_1',
{
name: 'action_2',
beforeEmit: function(payload, next) {
console.log('Hey, I\'m emiting ' + payload + '!');
next(payload);
},
shouldEmit: function(payload) {
if(payload < 2) {
console.log('Sorry, son, I can\'t emit ' + payload);
return false;
}
console.log('Aaw yeah, just emiting ' + payload + '!');
return true;
}
}
]
});
// Or like this
dispatcher.createAction('action_3');
// Or like this
dispatcher.createAction('action_4', function(payload, next) {
console.log('So... this is the beforeEmit!, I\'m gonna double it for you.');
next(payload * 2);
});
// Or like this
dispatcher.createAction('action_5', {
beforeEmit: function(payload, next) {
console.log('Hey!');
next(payload);
},
shouldEmit: function(payload) {
console.log('I would say that you shall not pass, but c\'mon...');
return true;
}
});
// Or like this
dispatcher.createActions([
'action_6',
'action_7'
]);
var MyCollection = require('./MyCollection');
var MyModel = require('./MyModel');
var myModel = new MyModel();
var myCollection = new MyCollection();
dispatcher.register('action_1', myCollection, 'handleAction1');
dispatcher.registerStore(['action_2'], myModel, ['handleAction2']);
dispatcher.register('action_2', myCollection, function shinyCallback() {
console.log('Hi. This is action_2\'s inline callback! I am bound to myCollection so I can also output things like ' + this.toJSON());
});
dispatcher.registerStore({ action_3: 'handleAction3' }, myModel);
dispatcher.dispatch('action_1', 'Yep, that\'s it, I am the payload');
dispatcher.dispatch('action_2', 3);