knockout.js

knockout.js是前端一个js库，实现了MVVM,knockout.js专注于数据的绑定，上手比较简单，只需学习一两天就可以使用！！！

2019-02-27  16:30:12

官方地址: http://knockoutjs.com/ 
中文API文档: http://www.aizhengli.com/knockoutjs/knockoutjs.html

一、knockout.js简介

knockout.js(简称ko)是一个JavaScript库，可帮助您使用干净的底层数据模型创建丰富，响应迅速的显示和编辑器用户界面。是实现了MVVM的一个轻量级前端框架。

二、ko的优点

1.KnockoutJS类库提供了简单和直接方式处理复杂的数据驱动接口。
2.使用纯Javasript类库并且可以和任何框架整合，它并不是jQuery类库的替代品， 但是可以作为高级特性的补充。
3.KnockoutJS类库文件非常轻量级。
4.KnockoutJS是独立的框架，兼容任何服务器或者客户端技术，KnockoutJS开源并且免费。
5.拥有完整的文档，官方的网站包含了API文档， 实际例子和互动教程等等。

三、ko的特点

1、优雅的依赖关系跟踪 - 在数据模型发生变化时自动更新UI的正确部分。简单说，就是当绑定的属性发生了变化时，UI自动更新对应的显示值。

2、声明性绑定 - 将UI的各个部分连接到数据模型的简单明了的方法。您可以使用任意嵌套的绑定上下文轻松构建复杂的动态UI。

3、简单可扩展 - 将自定义行为实现为新的声明性绑定，以便在几行代码中轻松重用。

四、ko的使用(开发工具自选可以是VS、webstrom)

1、导入ko相关库导入

<script src="/js/jquery.min.js"></script> 基础
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验

 2、声明

要使用KO创建视图模型，只需声明任何JavaScript对象。例如，

var myViewModel = {
    personName：'高司令'，
    personAge：123
};

然后，您可以使用声明性绑定创建此视图模型的非常简单的视图。例如，以下标记显示personName值：

 

名称是<span data-bind =“text：personName”> </ span>

3、要激活Knockout，请将以下行添加到<script>块中：（将view modle激活）

ko.applyBindings（myViewModel）;

 

 激活后，视图才能显示。

 

五、ko知识

1、event事件绑定

　　<div>
　　　　<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div>
　　　　<div data-bind="visible: detailsEnabled"> Details </div>
　　</div>
　　<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
　　<script type="text/javascript">
　　　　var viewModel = {
　　　　　　detailsEnabled: ko.observable(false),
　　　　　　enableDetails:function() {
　　　　　　　　this.detailsEnabled(true); //触发mouseover事件时，显示<div data-bind="visible: detailsEnabled"> Details </div>的内容
　　　　　　},
　　　　　　disableDetails:function () {
　　　　　　　　this.detailsEnabled(false); //触发mouseout事件试试，隐藏<div data-bind="visible: detailsEnabled"> Details </div>的内容
　　　　　　}
　　　　};
　　　　ko.applyBindings(viewModel);
　　</script>

　　就是通过在一个div上绑定两个事件，mouseover和mouseout。

　　mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

　　mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

2、submit绑定（适用于form元素）

　　<form data-bind="submit: doSomething">
　　　　... form contents go here ...
　　　　<button type="submit">Submit</button>
　　</form>

　　<script type="text/javascript">
　　　　var viewModel = {
　　　　　　doSomething : function(formElement) {
　　　　　　// ... now do something
　　　　　　}
　　　　};
　　</script>

3、value绑定适用于：input、select和textarea

　　value的其他参数绑定：

　　valueUpdate：input当是<input> or <textarea>时更新view
    valueUpdate：keyup，松开键盘的键
    valueUpdate：keypress，键盘的键按下
    valueUpdate：afterkeydown当开始键入一个字符粗发
    valueUpdate：valueAllowUnset，允许用户展现options中没有的值
4、click绑定
　　@{

　　　　　　Layout = null;
　　　　}
　　　　<script src="~/Scripts/jquery-1.10.2.js"></script>
　　　　<script src="~/Scripts/knockout-3.2.0.js"></script>
　　　　<div>
　　　　　　You've clicked <span data-bind="text: numberOfClicks"></span> times
　　　　　　<button data-bind="click: incrementClickCounter">Click me</button>
　　　　</div>

　　　　<script type="text/javascript">
　　　　　　var viewModel = {
　　　　　　　　numberOfClicks: ko.observable(0),
　　　　　　　　incrementClickCounter: function () {
　　　　　　　　　　var previousCount = this.numberOfClicks();
　　　　　　　　　　this.numberOfClicks(previousCount + 1);
　　　　　　　　}
　　　　　　};
　　　　　　ko.applyBindings(viewModel);
　　　　</script>

　　每当你点击button按钮的时候，viewModel 里面的incrementClickCounter() 函数被调用，然后更新 numberOfClicks 的值，然后更新界面。

5、阻止事件冒泡，语法如下：

　　<div data-bind="click: myDivHandler">
    　　<button data-bind="click: myButtonHandler, clickBubble: false">
       　　 Click me
    　　</button>
　　</div>

6、selectedOptions绑定：selectedOptions绑定用于控制multi-select列表已经被选择的元素，用在使用options绑定的<select>元素上。
　　<p> Choose some countries you'd like to visit: 

　　　　<select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"> </select>
　　　</p>

　　　<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
　　　<script type="text/javascript">
　　　　var viewModel = {
　　　　　　availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
　　　　　　chosenCountries: ko.observableArray(['Germany'])
　　　　};
　　　　ko.applyBindings(viewModel);
　　　　viewModel.chosenCountries.push('France');
　　</script>

7、Knockout绑定语法： 

　　（1）、visible 绑定 ——-使得该元素的hidden和visible状态取决于绑定的值
　　（2）、Text 绑定 ———使得该元素显示的文本值为绑定的参数（多用于显示上）
　　（3）、Html 绑定 ———-使得该元素现实的html值为绑定的参数
　　（4）、Css 绑定 ———-添加或删除一个或多个CSS 样式 至DOM元素上
　　（5）、Style 绑定 ———-添加或删除一个或多个style样式 至DOM元素上
　　（6）、attr 绑定 ———提供了一种方式可以设置DOM元素的任何属性（例如src、herf）
　　（7）、Click 绑定 ———–在DOM元素上添加事件以便元素被点击的时候执行定义的JavaScript 函数（多用于button、input、a）
　　（8）、Event 绑定 ———-在DOM元素上添加指定的事件以便元素被触发的时候执行定义的JavaScript 函数（多用于keypress，mouseover和mouseout上）
　　（9）、Submit 绑定 ———-在from表单上添加指定的事件以便提交时执行javaScript函数（只能用于from元素）
　　（10）、Enable 绑定 ———–使DOM元素只有在参数值为true时才enable(激活) （多用于input、select、textarea）
　　（11）、Disable 绑定 ———–使DOM元素只有在参数值为true时才disable (禁用)（与上条用途一致）
　　（12）、value 绑定 ———–关联DOM元素的值到view mode的属性上（与上条用途一致）
　　（13）、Checked 绑定 ————关联到checkable的form表单控件到view model上
　　（14）、Options 绑定 ———–控制什么样的options在下拉列表或者多选列表里，此绑定不能用于select之外的元素，关联的数据应为数组，select会遍历显示数组的所有的项
　　（15）、SelectedOptions 绑定 ———用于控制多选列表已经被选择的元素，用在使用options绑定的select元素上
　　（16）、UniqueName 绑定——–确保所有绑定的元素都有一个非空的name属性，如果该元素没有name属性，就给他设置一盒unique的字符串作为name属性