Cell Rendering: HTML-ish/HAML-ish (pick your poison)

cell-render-haml.coffee

# HAML-ish
define
  render: (_)-> [
    _ 'input#newtodo', type:'text', placeholder:'... new todo'
    _ 'ul.todos',
      for todo in window.todoList
        _ 'li', todo
  ]

cell-render-haml.js

// HAML-ish
define({
  render: function(_) { return [
    _('#newtodo', {type:'text',placeholder:'... new todo'}),
    _('ul.todos',
      window.todoList.map(function(todo){
        return _('li', todo);
      })
    )
  ]; }
});

cell-render-html.coffee

# HTML-ish
define
  render: (_)-> [
    _ '<input id="newtodo" type="text" placeholder="... new todo">'
    _ '<ul class="todos">',
      for todo in window.todoList
        _ '<li>', todo
  ]

cell-render-html.js

// HTML-ish
define({
  render: function(_) { return [
    _('<input id="newtodo" type="text" placeholder="... new todo">'),
    _('<ul class="todos">',
      window.todoList.map(function(todo){
        return _('<li>', todo);
      })
    )
  ];}
});

render-result.html

<!--
  window.todoList = ['one','two','three','four'];
-->

<input id="newtodo" type="text" placeholder="... new todo"></input>
<ul class="todos">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>