Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。请参看Bootstrap中文文档，这是3.0版本。

KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。官网文档。

Bootstrap负责UI，KnockoutJS负责数据绑定，两者相得益彰，Web前端必备利器。

我们来做一个简单的例子展示一下它们的威力。

要搁以前，实现类似功能，可以有两个选择：a）直接操作DOM，够喝一壶，一般喜欢展现技术同学的首选；b）借助各种拉风的重量级JS框架，比如extjs，使用它们的API以减少工作量，不过这些框架的学习曲线也挺扭曲。当然本文所说的两个框架也涉及到各自的JS类库，but，提供给开发人员的使用方式是完全不同的，后者更松散（废话，两个当然比一个松散）、灵活，且是基于特性声明的方式，个人表示相当不错。下面就让我们开始码吧。

首先搭个初步的框架：

    
         
     
              
      
                   
       
                        
        
         用户名                
                         
         
          添加            
         
        
       
      
            
      
                       
       
                                                        用户ID                    用户名                    
        
         删除                                                                    
         
                  @foreach (AreaElement area in Model.Areas)        {            
          
                           
           
                                @{if (area.Sites.Count == 0)                      {                        
            
                                         
                                         @area.Name                                              }                      else                      {                        @area.Name                      }                    }                                @if (area.Sites.Count > 0)                {                    
             
                                      @foreach (SiteElement site in area.Sites)                        {                            
              
                                               
               @site.Name                                                    }                                    }                    }        
               
                            
                
                 保存        
                 
    
                
               
              
             
            
           
          
         
        
       
      
     
    

这里就用到了bootstrap，如果一个元素使用了相应的class，它就会呈现bootstrap中预定义的样式。bootstrap还提供了data-xxx属性，这是用来以声明方式使用组件，这里没有涉及。now，界面如下：

图中标注了需要改进的两个地方，此时先不考虑。我们现在要先把数据从后台取出，以及其它的一些操作，于是引进KnockoutJS。接触过WPF的都知道ViewModel的概念，说白了就是将前端分为UI和交互逻辑，ViewModel就负责交互逻辑，knockoutJS也有这个东西。结合例子具体来看：

window.adApp.authManageViewModel = (function (ko) {    var userList = ko.observableArray(),        error = ko.observable(),        addUser = function (username) {            this.clearError();            if (!username) {                error("请输入用户名.");            }            else {                this._ajaxRequest("post", '/api/UserAuthority/AddUser', { "": username }, function (data) {                    if (!data.IsSucceed)                        this.error(data.Message);                    else {                        var user = new User(data.Data);                        this.userList.unshift(user);                    }                });            }        },        deleteUser = function (user) {            this._ajaxRequest("delete", '/api/UserAuthority/DeleteUser', { "": user.userid }, function (data) {                if (!data.IsSucceed)                    this.error(data.Message);                else {                    this.userList.remove(user);                }            });        },        getUsers = function () {            this._ajaxRequest("get", '/api/UserAuthority/GetUsers', null, function (data) {                this.userList.removeAll();                for (var i = 0; i < data.length; i++) {                    userList.push(new User(data[i]));                }            });        },        selectUser = function (user) {            for (var i = 0; i < userList().length; i++) {                userList()[i].selected(false);            }            user.selected(true);            this._ajaxRequest("get", '/api/UserAuthority/GetAccessNavItems', { userid: user.userid }, function (data) {                user.navitems.removeAll();                for (var i = 0; i < data.length; i++) {                    user.navitems.push(data[i]);                }            });        },        clearError = function () { error(""); };    var viewmodel = {        userList: userList,        error: error,        _ajaxRequest: ajaxRequest,        addUser: addUser,        deleteUser: deleteUser,        clearError: clearError,        _getUsers: getUsers,        selectUser: selectUser,        currentUser: ko.computed(function () {            for (var i = 0; i < userList().length; i++) {                if (userList()[i].selected()) {                    return userList()[i];                }            }            return null;        })    };    viewmodel._getUsers();    return viewmodel;    function ajaxRequest(type, url, data, callback) { // Ajax helper        this.clearError();        $.ajax({            url: url,            data: data,            type: type,            dataType: "json",            context: this,//指定this为当前对象viewmodel            success: callback,            error: function () {                this.error("服务器错误.");            }        });    }})(ko);// Initiate the Knockout bindingsko.applyBindings(window.adApp.authManageViewModel);

window.adApp.authManageViewModel就是ViewModel，它包含了两个属性（UserList为用户集合，error为提示信息，准确的命名应该类似msg，懒得改了）和若干函数（和服务端交互）。ko.applyBindings将该ViewModel绑定到页面。上述代码还涉及到两个类型：

function NavItem(data) {    var self = this;    data = data || {};    // Persisted properties    self.code = data.code;    self.name = data.name;}function User(data) {    var self = this;    data = data || {};    // Persisted properties    self.userid = data.userid;    self.username = data.username;    data.navitems = data.navitems || [];    self.navitems = ko.observableArray(data.navitems);    self.selected = ko.observable(false);}User.prototype.updateNavs = function () {    var user = this;    window.adApp.authManageViewModel._ajaxRequest(        "put", '/api/UserAuthority/UpdateNavItems?userid=' + user.userid, { "": user.navitems()}, function (data) {            if (!data.IsSucceed)                this.error(data.Message);            else {                this.error("保存成功!");            }        });}

现在页面代码如下：

    
         
     
              
      
                   
       
                        
        
         用户名                @*data-bind="input: clearError" 不支持input绑定，so换用自定义绑定，or采用event绑定如下*@                
                         
         
          添加            
         
        
       
      
            
      
                       @*如果userList集合有项，才显示该表格，注意if、ifnot的作用范围不包括table标记本身，而是从thead开始*@        
       
         0" class="table table-bordered table-hover" style="margin-top: 20px;">                                                用户ID                    用户名                    
        
         删除                                        
         
                          
          
                               
           
                                
            
                                 
             
                                      
              
                                           
               
                                                                                                        @*将下面div的绑定对象设为currentUser，如果currentUser为空，则该div中的内容不会显示*@    
                
                         @foreach (AreaElement area in Model.Areas)        {            
                 
                                  
                  
                                       @{if (area.Sites.Count == 0)                      {                        
                   
                                                
                                                @area.Name                                              }                      else                      {                        @area.Name                      }                    }                                @if (area.Sites.Count > 0)                {                    
                    
                                             @foreach (SiteElement site in area.Sites)                        {                            
                     
                                                      
                      @site.Name                                                    }                                    }                    }        
                      
                                   
                       
                        保存        
                        
    
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

代码中加了很多data-bind属性，作用不言自明。需要注意的是所谓自定义绑定。当绑定的值变动了，希望执行额外的逻辑（和c#中的事件相似），就会用到。这里，当error的值有变动，为空时提示面板隐藏，否则显示：

animVisible就是一个自定义绑定，定义如下：

ko.bindingHandlers.animVisible = {    update: function (elem, valueAccessor) {        var error = ko.unwrap(valueAccessor());        if (error) {            elem.innerText = error;            $(elem).show(300);        }        else {                        $(elem).hide(300);            elem.innerText = "";        }    }};

OK，接下来，当点击表格的每一行，currentUser就会自动计算得到（ko.computed），并反馈到界面，绑定了该字段的div内部的相应节点的状态也会相应变化（checkbox）。保存啥的就不说了。综上所述，除了必要的与后台交互的代码，涉及到操作UI和DOM节点，我们不需要写一行JS，很爽很舒服。

ps：本来想写详细点，结果发现写一大堆还不如几行代码来的清楚。文中若有错误之处，请及时告知，大家交流，共同进步。