Dolpy scifi

todo.js

define(
  ['Layout', 'Collection', 'Model'], 
  function('Layout', 'Collection', 'Model') {
    'use strict';

    Layout.defineWidget('todo-item', 
      { tag: 'div',
        cls: ['todo-item', 
             { test: 'item.completed', yes: 'completed' },
             { test: 'editedItemId == item.id', yes: 'editing' } ],
        bind: 'item',
        content: [
          { widget: 'checkbox', field: 'completed' },
          { test: 'editedItemId == item.id',
            yes: { tag: 'input', cls: 'edit', value: { field: 'title' } },
            no: { tag: 'label', content: { field: 'title' } }
          },
          { widget: 'button', cls: 'destroy', action: 'delete' }
        ]
      }
    );

    var todoListLayout = Layout({
      widget: 'section',
      cls: 'todoapp',
      header: [
        { tag: 'h1', content:"todos" },
        { tag: 'input', 
          handlers: { enter: 'createTodo' }, 
          attr: { placeholder: 'What needs to be done?', autofocus: true } }
      ],
      content: { test: 'todos', nonEmpty: [
        { widget: 'checkbox', 
          cls: 'toggle-all', 
          handlers: { change: 'completeAll' }
          label: 'Mark all as complete' },
        { widget: 'list',
          cls: 'todo-list',
          items: { each: 'todos', item: { widget: 'todo-item' } } }
      ]},
      footer: { test: 'remaining', nonEmpty: [
        { tag: 'span', 
          cls: 'todo-count', 
          content: [
            { tag: 'strong', content: { expr: 'remaining.length' } },
            { test: 'remaining', singular: ' item left', plural: ' items left' },
          ]
        },
        { widget: 'list',
          cls: 'filters',
          items: [
            { tag: 'a', 
              cls: { test: 'filter == "all"', yes: 'selected' }, 
              href: '#/', 
              content: 'All' },
            { tag: 'a', 
              cls: { test: 'filter == "active"', yes: 'selected' }, 
              href: '#/active', 
              content: 'Active' },
            { tag: 'a', 
              cls: { test: 'filter == "completed"', yes: 'selected' }, 
              href: '#/completed', 
              content: 'Completed' }
          ]
        }
      ]}
    });

    var todos = Collection({
      schema: {
        description: 'Todo list item',
        type: 'object',
        properties: {
          title: { type: 'string', required: true },
          completed: { type: 'boolean', default: false },
          order: { type: 'integer', required: true }
        }
      }
    });

    return function(context) {
      context.view = todoListLayout;

      context.model = {
        todos: todos,
        filter: 'all',
        remaining: function() {
          return this.filter({completed: false});
        }
      };

      var hashHanders = {
        '#/': function() {
          todos.setFilter(null);
          context.model.filter = 'all';
        },

        '#/active': function() {
          todos.setFilter({completed: false});
          context.model.filter = 'active';
        },

        '#/completed': function() {
          todos.setFilter({completed: true});
          context.model.filter = 'completed';
        }
      };

      context.handlers = {
        createTodo: function(evt) {
          todos.create({title: evt.target.value});
        },

        completeAll: function() {
          todos.each(function(todo) {
            todo.completed = true;
          });
        },

        onHashChange: function(urlHash) {
          var handler = hashHanders[urlHash];
          if (handler) handler();
        }
      };
    }
  }
);