build.js

(function() {
  var _base;

  this.HAMLjr || (this.HAMLjr = {});

  (_base = this.HAMLjr).templates || (_base.templates = {});

  this.HAMLjr.templates["template"] = function(data) {
    return (function() {
      var __attribute, __each, __element, __filter, __on, __pop, __push, __render, __text, __with, _ref;
      _ref = HAMLjr.Runtime(this), __push = _ref.__push, __pop = _ref.__pop, __attribute = _ref.__attribute, __filter = _ref.__filter, __text = _ref.__text, __on = _ref.__on, __each = _ref.__each, __with = _ref.__with, __render = _ref.__render;
      __push(document.createDocumentFragment());
      __element = document.createElement("ul");
      __push(__element);
      __each(this.todos, function() {
        __element = document.createElement("li");
        __push(__element);
        __element = document.createElement("div");
        __push(__element);
        __attribute(__element, "class", "name");
        __element = document.createTextNode('');
        __text(__element, this.name);
        __push(__element);
        __pop();
        __pop();
        __element = document.createElement("button");
        __push(__element);
        __element = document.createTextNode('');
        __text(__element, "Remove\n");
        __push(__element);
        __pop();
        __on('click', this.remove);
        __pop();
        return __pop();
      });
      __pop();
      __element = document.createElement("button");
      __push(__element);
      __element = document.createTextNode('');
      __text(__element, "New\n");
      __push(__element);
      __pop();
      __on('click', this.append);
      __pop();
      __element = document.createElement("button");
      __push(__element);
      __element = document.createTextNode('');
      __text(__element, "O_o\n");
      __push(__element);
      __pop();
      __on('click', this.update);
      __pop();
      return __pop();
    }).call(data);
  };

}).call(this);

(function() {
  var todos;

  this.Todo = function(name) {
    var todo;
    return todo = {
      name: Observable(name),
      remove: function() {
        return todos.remove(todo);
      }
    };
  };

  todos = Observable([Todo("yolo"), Todo("wat")]);

  ({
    todos: todos,
    append: function() {
      return this.todos.push(Todo("new"));
    },
    update: function() {
      var item;
      item = this.todos().rand();
      return item.name(item.name() + " O_o");
    }
  });

}).call(this);

(function() {
  var $root, gist, list, todos;

  $root = ENV.$root, gist = ENV.gist;

  todos = Observable([Todo("yolo"), Todo("wat")]);

  list = {
    todos: todos,
    append: function() {
      return this.todos.push(Todo("new"));
    },
    update: function() {
      var item;
      item = this.todos().rand();
      return item.name(item.name() + " O_o");
    }
  };

  $root.append(HAMLjr.templates.template(list));

}).call(this);

data.coffee

@Todo = (name) ->
  todo =
    name: Observable name
    remove: ->
      todos.remove(todo)

todos = Observable [
  Todo("yolo")
  Todo("wat")
]

todos: todos

append: ->
  @todos.push Todo("new")

update: ->
  item = @todos().rand()
  item.name(item.name() + " O_o")

main.coffee

# Get stuff from our env
{$root, gist} = ENV

todos = Observable [
  Todo("yolo")
  Todo("wat")
]

list = 
  todos: todos
  
  append: ->
    @todos.push Todo("new")
  
  update: ->
    item = @todos().rand()
    item.name(item.name() + " O_o")


$root.append HAMLjr.templates.template(list)

style.css

#preview {
  font-family: helvetica;
  padding: 1em;
}

#preview .name {
  display: inline-block;
  width: 200px;
}

style.styl

#preview
  font-family: helvetica
  padding: 1em

  .name
    display: inline-block
    width: 200px

template.haml

%ul
  - each @todos, ->
    %li
      .name= @name
      %button Remove
        - on 'click', @remove

%button New
  - on 'click', @append

%button O_o
  - on 'click', @update