MVC pattern applied in javascript (like ASP.NET MVC Style) http://www.cnblogs.com/yicone/archive/2010/08/17/1801125.html

Controller.js

/* construct */
function Controller() {
    this.viewModel = new ViewModel();
}

/* public methods */
Controller.prototype.index = function () {
    var controller = this;
    controller._bindEventList();
};
Controller.prototype.post = function (title, content, callback) {
    var controller = this;
    $.ajax('/event/post', {
        title: title,
        content: content
    },
    function (newEvent) {
        if (controller.viewModel.pageIndex == 1) {
            // may be there are (pageSize + 1) items.
            controller.viewModel.eventList.push(newEvent);
        } else {
            controller.viewModel.pageSize = 1;
            controller._bindEventList();
        }
        callback && callback();
    });
};
Controller.prototype.reply = function (eventId, content, callback) {
    var controller = this;
    // todo: 'find' need create
    controller.viewModel.selectedEvent = controller.viewModel.eventList.find(eventId);
    $.ajax('/event/reply', {
        eventId: controller.viewModel.selectedEvent.Id,
        content: content
    },
        function (newReply) {
            controller.viewModel.selectedEvent.ReplyList.push(newReply);
            // still show(refresh) the page where the selected event in.
            controller._bindEventList();
            callback && callback();
        });
};

/* public events */
// refactory: use better solution replaces 'null'
Controller.prototype.afterEventListBinded = null;

/* private methods */
Controller.prototype._bindEventList = function (callback) {
    $.ajax('/event/list', {
        pageSize: controller.viewModel.pageSize
    },
        function (result) {
            controller.viewModel.eventList = result.eventList;
            controller.viewModel.pageCount = result.pageCount;
            // renderTemplate is a custom wrapper of jTemplates
            renderTemplate('event-list', {
                eventList: controller.viewModel.eventList,
                pageIndex: controller.viewModel.pageIndex,
                pageSize: controller.viewModel.pageSize,
                pageCount: controller.viewModel.pageCount
            });

            controller.afterEventListBinded && controller.afterEventListBinded();
            callback && callback();
        });
};

init.js

/* page ready */
$(function () {
    var controller = new Controller();
    // event bind
    controller.afterEventListBinded = function () {
        $('.btnReply').click(function () {
            var eventId = $(this).attr('eventId');
            var content = $('.txtReply', $(this).parent()).val();

            controller.reply(eventId, content,
                function () {
                    alert('reply successful');
                });
        });
    };

    controller.index();

    $('#btnPost').click(function () {
        var title = $('#txtTitle').val();
        var content = $('#txtContent').val();
        controller.post(title, content,
            function () {
                alert('post successful');
            });
    });
});

View.html

    <div>
        <textarea od="txtContent"></textarea>
        <input type="button" id="btnPost" />
    </div>
    <div id="event-list">
        <!-- render template -->
        <textarea id="event-list-template" class="template">
            <ul>
            {#for $T.eventList as event }
                <li>
                    <div>{$T.event.title} | {$T.event.accountId} | {$T.event.insertDate}</div>
                    <div>{$T.event.content}</div>
                    {#for $T.event.replyList as reply }
                        <div>{$T.reply.accoutId}| {$T.reply.insertDate}</div>
                        <div>{$T.reply.content}</div>
                    {/#for}
                    <textarea class="txtReply"></textarea>
                    <input type="button" value="reply" class="btnReply" eventId="{$T.event.eventId}" />
                </li>
            {/#for}
            </ul>
            <div>{$T.pageIndex} in {$T.pageSize}, total: {$T.pageCount}</div>
         </textarea>
    </div>

ViewModel.js

function ViewModel() {
    this.eventList = [];
    this.selectedEvent = null;
    this.pageIndex = 1;
    this.pageSize = 10;
    this.pageCount = 0;
}