JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="app"></div>

CSS

.pane {
  float: left;
  width: 250px;
  margin-right: 15px;
}

JavaScript 1.7

/** @jsx React.DOM */

var App = React.createClass({displayName: 'App',
  render: function() {
    return (
      <div>
            <PaneList panes={this.props.data.panes}/>
      </div>
    );
  }
});

var PaneList = React.createClass({displayName: 'PaneList',
  render: function() {
    var paneNodes = this.props.panes.map(function (pane) {
      return <Pane pane={pane}/>;
    });
    return (
        <ul>{paneNodes}</ul>
    );
  }
});

var Pane = React.createClass({displayName: 'Pane',
  render: function() {
    return (
      <li className='pane'>
        <h2>{this.props.pane.name()}</h2>
        <TaskList tasks={this.props.pane.tasks()}/>
      </li>
    );
  }
});

var TaskList = React.createClass({displayName: 'TaskList',
  render: function() {
    var taskNodes = this.props.tasks.map(function (task) {
      return <Task task={task}/>
    });
    return (
      <ul>{taskNodes}</ul>
    );
  }
});

var Task = React.createClass({displayName: 'Task',
  render: function() {
    return (
      <li>{this.props.task.name}</li>
    );
  }
});

// models
var nextId = 1;
var appData = {
  people: [],
  tasks: [],
  panes: []
}

var addPerson = function(name) {
  var obj = {
    id: nextId++,
    name: name,
  };
  obj.tasks = function() { return _.filter(appData.tasks, function(t) { return t.done === false && t.assigneeId === this.id }.bind(this)); }.bind(obj);

  appData.people.push(obj);
  return obj;
};

var addTask = function(name, assigneeId, priority) {
  var obj = {
    id: nextId++,
    name: name,
    assigneeId: assigneeId,
    priority: priority,
    done: false
  };
  appData.tasks.push(obj);
  return obj;
};

var addPane = function(personId, priority) {
  var obj = {
    id: nextId++,
    personId: personId,
    priority: priority
  };
  obj.name = function() { return this.person().name + " [" + this.priority + "]"; }
  obj.person = function() { return _.find(appData.people, function(p) { return p.id === this.personId }.bind(this)); }.bind(obj);
 ...