尝试实现一个JavaScript MVC方案

此方案是一次将MVC的思想引入客户端的尝试. 结合AJAX , 并借鉴了一些ASP.NET MVC的实现模式.

 

示例是一个简单的事件管理系统, 只有一个页面, 用户可以提交事件(post), 回复(reply). 页面打开时列表方式展现事件及回复.

 

Controller公开一系列action 给调用方.

action主要做三类事:

1. 使用ajax方式与服务器端通信(ajax)

2. 维护viewModel实例的状态

3. 刷新页面的局部视图

 

 

 1 /* 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();
    };
};
 

 

 

 

Controller引用着一个ViewModel的实例, ViewModel的定义如下:

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

 

调用示例:

这个示例是jquery版的, DOM中也能看到jTemplates的影子(一个jquery插件), 但从思想到实现, 这个方案并不依赖于jquery, Controller中的两处外部依赖($.ajax和renderTemplate)完全可以寻找其他等价物替代.

此示例项目选用jquery和jTemplates完全是项目选型决定, 实现上只是借用了现成的便利.

 

 1 /* 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');
        });
    });
});

 

 

 

 1 <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>

(DOM中 <textarea class="template">... </textarea>是一个 jTemplates 模板)