Backbone + Flux + React

by codemeasandwich

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://kenwheeler.github.io/mcfly/McFly.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

// FLUX using Backbone evnts

// ActoinName+data >> Dispatcher >> Store(applys changes) > emit change >> views(pull new state data)

//=====================================================
//========================================= Data Modles
//=====================================================

var ToDo = Backbone.Model.extend({
		initialize: function(){ 
      this.set({
      	id:(new Date()).getTime(), 
        created: new Date()
      })
    }
});

 var ToDos = Backbone.Collection.extend({
  model: ToDo
});

var DATA = new ToDos()

//=====================================================
//========================================== Dispatcher
//Take the brocasted Action and find what Store to tell

var Dispatcher = Backbone.Events

//=====================================================
//=============================================== Store
//============================================ App data

var ACTIONS = {
	TODO:{
  	ADD:"ADD_TODO",
    DEL:"DEL_TODO"
  }
}
    	
var Store = function(DATA,rules){

// ++ Stores should recive all actions ++
    this.auto = Dispatcher.on("all",rules),

		this.mixins = {
      componentWillMount: function() {
        // ++ emit change if underlying data changes ++
        DATA.on("all", (function(){this.forceUpdate()}).bind(this));
      },
      componentWillUnmount: function() {
        DATA.off("all", (function(){this.forceUpdate()}).bind(this));
      }
    },
    
    this.getData = function(){
       return DATA.toJSON();
    }
}

var toDoStore = new Store(DATA, function(actionName,data){
          switch(actionName){
            case ACTIONS.TODO.ADD:
               DATA.add(new ToDo({text:data.text}))
              break;
            case ACTIONS.TODO.DEL:
                DATA.remove(data.id)
              break;
          }
      });

//=====================================================
//================================================ View
//=====================================================

/**...