Mobx todo example

Shows a mobx backed todo with actions author(s): Matt Ruby

HTML

<div id="mount"></div>




<script src="https://cdn.jsdelivr.net/g/[email protected](react.min.js+react-dom.min.js),[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.min.js"></script>
<!-- <script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/mobx-react-devtools"></script> -->

JavaScript

mobx.useStrict(true);
console.log(mobx)
var todoFactory = function (title) {

    var todo = {
        id: Math.random(),
        toggleStatus: mobx.action(function toggleStatus() {
            todo.finished = !todo.finished;
        })
    };
    mobx.extendObservable(todo,
        {
            title: title,
            finished: false
        }
    );
    return todo;
};

var todoListFactory = function () {
    var todoList = {
        addTodo: mobx.action(function addTodo (todo) {
            todoList.todos.push(todo);
        }),
        addTodos: mobx.action(function addTodos (todos) {
            todoList.todos = todoList.todos.concat(todos);
        })
    };

    mobx.extendObservable(todoList, {
        todos: [],
        unfinishedTodoCount: function () {
            return todoList.todos.filter(function (todo) {
                return !todo.finished;
            }).length;
        }
    });

    return todoList;
};

var TodoListView = mobxReact.observer(function TodoListView() {
        var devtools = mobxDevtools ? React.createElement(mobxDevtools.default) : null;

        var listItems = this.props.todoList.todos.map(function (todo) {
            return React.createElement(TodoView, {todo: todo, key: todo.id});
        });

        return React.createElement('div', null,
            devtools,
            React.createElement('ul', null, listItems),
            'Tasks left: ' + this.props.todoList.unfinishedTodoCount
        );
    }
);

var TodoView = mobxReact.observer(
    React.createClass({
        displayName: 'TodoView',
        render: function () {
            var todo = this.props.todo;
            return React.createElement('li', null,
                React.createElement('input', {
                    type: 'checkbox',
                    checked: todo.finished,
                    onClick: this.selectHandler
                }),
                todo.title
            );
        },
        selectHandler: function () {
           ...