JSFiddle - React, Tailwind, and code Playground

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="http://documentcloud.github.io/underscore/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

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

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

var store = new ToDos();

/** McFly */

var Flux = new McFly();

/** Store */


var TodoStore = Flux.createStore({
    getTodos: function(){
       return store.toJSON();
    }
}, function(payload){
	console.log("1");
    if(payload.actionType === "ADD_TODO") {
       store.add(new ToDo({task:payload.text}))
    } else if(payload.actionType === "DEL_TODO"){
    	store.remove(payload.id)
    }
});

Flux.createStore({
    getTodos: function(){
       return store.toJSON();
    }
}, function(payload){
	console.log("2");
});

store.bind("all", function(){
  TodoStore.emitChange();
});

/** Actions */

var TodoActions = Flux.createActions({
    addTodo: function(text){
       return {
          actionType: "ADD_TODO",
          text: text
       }
    },
    delTodo: function(id){
       return {
          actionType: "DEL_TODO",
          id: id
       }
    }
});

function getState(){
   return {
       todos: TodoStore.getTodos()
   }
}

/** Controller View */

var TodosController = React.createClass({
    mixins: [TodoStore.mixin],
    getInitialState: function(){
        return getState();
    },
    onChange: function() {
        this.setState(getState());
    },
    render: function() {
        return <Todos todos={this.state.todos} />;
    }
});

/** Component */

var Todos = React.createClass({
    addTodo: function(){
        TodoActions.addTodo('test');
    },
    deleteTodo: function(index){
    console.log("deleteTodo",arguments);
        TodoActions.delTodo(index);
    },
    render: function() {
        return (
        <div className="todos_app">
            <ul className="todos">
                { this.props.todos.map((function(todo){
                
                    return <li key={todo.id}>Todo: {todo.id}
           ...