BootstrapTable和KnockoutJS相结合 实现添加、删除、修改、检查的功能[I]

Bootstrap是一个前端框架，解放了Web开发人员的好东西，显示出非常高端的UI，所以理论上没有必要写css线。只需将适当的属性添加到标签中。

是一个由JavaScript实现的MVVM框架。非常好。比如列表数据项增加或减少后，不需要自己刷新整个控制片段或编写JS增/删节点，只需要预先定义符合其语法定义的模板和属性即可。简单来说，我们只需要关注数据访问。

一、淘汰赛介绍

1.淘汰赛. js和MVVM。

如今，各种前端框架不堪重负，令人眼花缭乱。有时候不得不感叹，做一个程真的很难，总有学不完的技能。什么时候结束，除非你转型！痛苦无边，该不该回头由你决定！

gentle . js是一个基于MVVM模式的轻量级前端框架。有多轻？根据官方网站上面显示的最新版本v3.4.0，只有22kb。数据模型和接口DOM之间的绑定可以用友好的方式处理。最重要的是，它的绑定是双向的，这意味着当数据模型发生变化时，接口DOM上的数据也会发生变化。反之，当接口DOM上的数据发生变化时，数据模型也会相应变化。这样可以大大减少我们的前端代码量，使我们的界面易于维护，而不需要编写大量的事件来监控数据模型和界面DOM的变化。下面博主将根据一个使用实例来说明这两点。

淘汰赛官网：http://knockoutjs.com

开放源码地址：https://github.com/knockout/knockout.

MVVM模式：这是一种创建用户界面的设计模式。MVVM把它分成三块：模型、视图和视图模型。模型是数据模型，视图是我们的视图，视图模型是视图模型，用来绑定数据模型和视图上的dom元素。如果您使用过WPF和Silverlight，理解这一点应该不成问题。没用过也没关系。看完这篇文章，你会有一个大致的了解。

2.最简单的例子。

一般来说，如果从头开始使用knowledge . js，至少需要做以下四个部分。

2.1.去官网下载淘汰赛. js文件，然后参考查看页面。

script src=' http : ~/scripts/敲除/敲除-3.4.0.min.js'/script注意：敲除. js不需要jquery的支持。如果你的项目需要用到jquery的相关操作，可以参考jquery；否则，只需参考上述文件。

2.2.定义视图模型。

什么是viewmodel？实际上，在js中，它看起来像一个json对象。我们定义了一个视图模型：

Var myviewmodel={name: '李雷'，profession: '软件工程师'，}；2.3.绑定数据绑定的标签在视图视图中定义。

Div名称：label data-bind=' text : name '/label br/职业：input type=' text ' data-bind=' textinput : professionals '/div注意：输入标签对应的文本需要text input，而普通标签的文本可以使用text。

2.4.激活绑定。

做了以上三步之后，还需要激活敲除的绑定。

ko . applybindings(my viewmodel)；通过做这四个部分，基本实现了视图模型最简单的数据绑定。获得效果：

如果你足够仔细的话，你会发现ko.applyBindings()方法有两个参数，第一个是我们需要绑定的viewmodel，第二个是什么？by ko . applybindings(Myviewmodel)；可以看出，第二个参数是一个可选参数，代表viewmodel绑定的标签的范围。例如，我们将更改上面的代码：

Div名称：labeid=' lb _ name '数据-绑定=' text : name '/label br/职业：inputtype=' text '数据-绑定=' text input 3360 professional '/div ko . apply binding(my viewmodel，document.getelementbyid ('lb _)。获取结果：

可以看出，第二个参数限制了myViewModel的范围，也就是说绑定只会对id='lb_name '的标签生效。如果第二个参数是容器标记，如div，则意味着绑定范围是这个di。