Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。
KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。
一、Knockout.js简介
1、Knockout.js和MVVM
如今，各种前端框架应接不暇，令人眼花缭乱，有时不得不感叹作为程序猿也真是苦逼，总有学不完的技术，何时是尽头，除非你转化！苦海无边，回头是不是岸，由你决定！
Knockout.js是一个基于MVVM模式的轻量级的前端框架，有多轻？根据官网上面显示的最新版本v3.4.0，仅22kb。能够友好地处理数据模型和界面DOM的绑定，最重要的是，它的绑定是双向的，也就是说数据模型变化了，界面DOM上的数据也会跟着发生变化，反过来，界面DOM上的数据变化了，数据模型也会相应这个变化。这样能够大大减少我们的前端代码量，并且使得我们界面易于维护，再也不用写一大堆事件监控数据模型和界面DOM的变化了。下面博主会根据一个使用实例来说明这两点。
Knockout.js开源地址：https://github.com/knockout/knockout
MVVM模式：这是一种创建用户界面的设计模式，MVVM把它拆分成三块就是Model、View、ViewModel，Model就是数据模型，View就是我们的视图，ViewModel就是一个视图模型，用来绑定数据模型和视图上面的dom元素。如果你使用过WPF和Silverlight，理解这个应该不是啥问题；没有使用过也什么关系，看完此文，你会有一个大致的认识。
2、最简单的实例
一般来说，如果你从零开始使用Knockout.js，你至少需要做以下四部
2.1、去官网下载knockout.js文件，然后引用到view页面里面。
<script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script>
注意：knockout.js并不需要jquery的支持，如果你的项目需要用到jquery的相关操作，则引用jquery；否则只引用以上文件即可。
2.2、定义ViewModel
viewmodel是什么？其实，在js里面，它看上去就像一个json对象。我们定义一个viewmodel：
var myViewModel = { Name: "Lilei", profession: "软件工程师", };
2.3、view视图里面定义绑定data-bind的标签
<div> 姓名：<label data-bind="text:Name"></label><br /> 职业：<input type="text" data-bind="textinput:Profession" /> </div>
注意：对应input标签的文本，需要使用textinput，而普通标签的文本使用text即可。
2.4、激活绑定
做了以上三步，还需要激活knockout的绑定
ko.applyBindings(myViewModel);
做到这四部，基本实现了一个最简单的viewmodel的数据绑定。得到效果：
如果你够细心，会发现ko.applyBindings()方法有两个参数，第一个就是我们需要绑定的viewmodel，第二个又是什么呢？由 ko.applyBindings(myViewModel); 可知，第二个参数是一个可选参数，它表示viewmodel绑定的标签的作用域，比如，我们将以上代码改一下：
<div> 姓名：<label data-bind="text:Name"></label><br /> 职业：<input type="text" data-bind="textinput:Profession" /> </div> ko.applyBindings(myViewModel,document.getElementById("lb_name"));
得到结果：
由此可知：第二个参数限定了myViewModel的作用范围，也就是说，只有在id="lb_name"的标签上面绑定才会生效，如果第二个参数是div等容器标签，它表示该绑定的范围为该div下面的所有子标签。
3、监控属性
截止到上面的四步，我们看不到任何效果，看到的无非就是将一个json对象的的数据绑定到了html标签上面，这样做有什么意义呢？不是把简单的问题复杂化吗？别急，马上见证奇迹！上文说了，knockout最重要的意义在于双向绑定，那么如何实现我们的双向绑定呢？答案就是监控属性。