gistfile1.js

// global set by server
COMMENTS = [{'title': 'hello', 'body': 'im a lonley comment'}];

// template & controller codez together as friends
html5(function(html) {
  
  html.import('jquery');
  html.import('json');
  
  html.n('body', function(body) {
    var commentList, commentForm, titleField, bodyField, errorView;
    
    commentList = body.n('ul', {'class': 'comments'});
    
    function addComment(title, body) {
      commentList.n('li', {'class': 'comment'}, function(li) {
        li.n('h3',{'class': 'title'}, title);
        li.n('h3',{'class': 'body'}, body);
      });
    }
    
    $.each(COMMENTS, function(c) { addComment(c.title,c.body) });
    
    commentForm = body.n('form', function(form) {
      
      errorView = form.n('p', {'class': 'validation-error'}, 'Invalid!').hide();
      
      titleField = form.textField('title');
      bodyField  = form.textField('body');
      form.submitButton();
      
    });
    
    commentForm.sumbit(function() {      
      if (titleField.isBlank() || bodyField.isBlank()) errorView.show();
      else {
        // ajax post to a server here, only addComment on succesful response
        addComment(titleField.val(),bodyField.val());
      }
    });
    
  });
  
});

// The html5 element yeilds an object with an n() method that both appends and returns a node like jQuery append(). The n() method also yeilds a similar object but scoped to that node.

// The n() function appends and returns an extended jquery object/node. The same code runs on both the client and the server. When running on the server, methods like submit() are no-ops (because you can't bind an event handler on the server) and on the client most calls to n() are no-ops because the nodes already exist.

// Also, some sugar:

node.import('jquery')
-> node.n('script', { 'src': '/jquery.js' })

node.textFeild('title')
-> node.n('input', { 'type': 'text', 'name': 'title' })

node.submitButton()
-> node.n('button', {'type': 'submit'}, 'Submit')

node.isBlank()
-> node.val().match(/^\s*$/)