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.author('Myles');
    
    // These are just shortcuts for html.n('body', ...)
    
    // Here however, n returns the new node, not the original node.
    // If you want to return the original node, use `append(...)`.
    
    html.body(function(body) {
        var commentList, commentForm, titleField, bodyField, errorView;
        
        commentList = body.ul().addClass('comments');

        function addComment(title, body) {
            // Here append is explicit, the difference is that 
            commentList.append(function(list) {
                list.li({'class': 'comment'}, function(li) {
                    li.h3(title).addClass('title');
                    li.p(body);
                });
            }).after(function(list){
                list.em('Comment added').fadeOutAfter(3000);
            });
        }

        $.each(COMMENTS, function(c) { addComment(c.title, c.body); });

        commentForm = body.form(function(form) {
            
            // Here append is implicit
            errorView = form.p('Invalid!').addClass('validation-error').hide();

            titleField = form.textField('title');
            bodyField = form.textField('body');
            form.submitButton();

        }).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());
            }
        });

    });

});