KnockoutJs是什么？

解释1：做.NET开发的人应该都知道，WPF中就集成了MVVM框架，所以KnockoutJs也是针对Web开发的MVVM框架。关于MVVM好处简单点来说就是——使得业务逻辑代码与页面展示代码分割开，使得前端项目更好维护。

之前，我们写Web页面的时候，JS代码和Html代码混合在一起，并且代码中充斥着大量的DOM对象的操作。这样代码结构非常混乱。有了MVVM框架了，你可以将JS代码和Html代码分割开，并且数据操作部分更加简单，只需要通过相应的语法（data-bind）绑定到对应的标签属性显示即可，从而加快开发速度。

KnockoutJs也就是这样一个MVVM框架。其实与其称其框架，更准备地应该是一个MVVM类库。因为它没有MVVM框架是一个比较“重”的概念，其中应该包括路由等特性。而KnockoutJS中却没有，相比较，AngularJS应该称为一个MVVM框架更加合适。

解释2：Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。

KO重要特性：

  • 优雅的依赖跟踪-任何时候当数据源模型发生变化时，它都能够自动的更新你UI的指定内容。

  • 声明式绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。

  • 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

其他优点：

  • 纯JavaScript库-兼容任何服务器和客户端技术。

  • 可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。

  • 简洁-采用Gzip压缩之后只要13K。

  • 兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)

  • 一套全面完整的规范（采用行为驱动开发）-这意味着在新的浏览器或平台中也能够很容易验证通过。

KnockoutJS主要实现的功能有以下4点：

声明式绑定（Declarative Bindings）：使用简单的语法将模型数据关联到DOM元素上。即"data-bind"语法
依赖跟踪（Dependency Tracking）：为转变和联合数据，在模型数据之间建立关系。如商品总价是由各个商品项价格之和。此时商品总价和商品项就可以使用依赖跟踪功能来建立关系。即由各个商品项的总价相加而得出。这种关系由KnockoutJs中computed函数完成。
UI界面自动刷新(Automatic UI Refresh)：当你的模型状态改变时，UI界面的将自动更新。这点由observable函数完成。
模板(Templating)：为您的模型数据快速编写复杂的可嵌套UI。和WPF中模板的概念类似。
接下来，我们通过具体的例子来让大家快速掌握KnockoutJs的使用。

三、声明式绑定　　　　

下面让我们看下如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中。

1.单向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
 
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Demo1-单向绑定</title>
 <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
 <body>
  <!--单向绑定-->
  <div>
   <p>First name: <strong data-bind="text: firstName"></strong></p>
   <p>Last name: <strong data-bind="text: lastName"></strong></p>
   <p>First name: <input data-bind="value: firstName" /></p>
   <p>Last name: <input data-bind="value: lastName" /></p>
  </div>
  
  <!--这段脚本实际项目中应该放在对应的JS文件中，然后在html中通过Script标签来引用即可-->
  <!--JS代码也就是业务逻辑部分，将业务逻辑与Html代码分割开，使得View代码更加简洁，这样后期也易于维护-->
  <script type="text/javascript">
   function ViewModel() {
    this.firstName = "Tommy";
    this.lastName = "Li";
   }
   ko.applyBindings(new ViewModel());
  </script>
 </body>
</html>

2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体看看双向绑定的例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Demo2-双向绑定</title>
  
 <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
 <!--双向绑定-->
 <div>
  <p>First name: <strong data-bind="text: firstName"></strong></p>
  <p>Last name: <strong data-bind="text: lastName"></strong></p>
  <p>First name: <input data-bind="value: firstName"/></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
 </div>
 <script type="text/javascript">
  function ViewModel() {
   this.firstName = ko.observable("Tommy");
   this.lastName = ko.observable("Li");
  }
   
  ko.applyBindings(new ViewModel());
 </script>
</body>
</html>

四、依赖跟踪
接下来让我们看下如何使用KO中的computed函数来完成依赖跟踪。具体例子的实现代码如下所示：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Demo3-依赖跟踪</title>
  
 <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
 <!--双向绑定-->
 <div>
  <p>First name: <strong data-bind="text: firstName"></strong></p>
  <p>Last name: <strong data-bind="text: lastName"></strong></p>
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName"/></p>
  <p>Full name: <strong data-bind="text: fullName"></strong></p>
  <button data-bind="click: capitalizeLastName">LastName To Upper</button>
 </div>
 <script type="text/javascript">
  function ViewModel() {
   this.firstName = ko.observable("Tommy");
   this.lastName = ko.observable("Li");
   // 依赖跟踪
   this.fullName = ko.computed(function () {
    return this.firstName() + " " + this.lastName();
   },this);
    
   // 通过代码改变observable的值
   this.capitalizeLastName = function() {
    this.lastName(this.lastName().toUpperCase());
   };
  }
  ko.applyBindings(new ViewModel());
 </script>
</body>
</html>

接下来，让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Demo4-列表绑定</title>
  
 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
 <table>
  <thead>
   <tr>
    <td>Name</td>
    <td>Amount</td>
    <td>Price</td>
   </tr>
  </thead>
  <tbody data-bind="foreach: items">
   <tr>
    <td data-bind="text: product.name"></td>
    <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
    <td data-bind="text: subTotal"></td>
    <td><a href="#" data-bind="click: $root.remove">Remove</a></td>
   </tr>
  </tbody>
 </table>
 <h3>Order Price: <span data-bind="text: price"></span></h3>
 <button data-bind="click: addComputer">Add a Computer</button>
 <script type="text/javascript">
  var products = [{ name: "Learnighard 学习笔记", price: 49 },
  { name: "小米Note", price: 999 },
   { name: "宏碁笔记本", price: 4999 }];
  // 订单类
  function Order() {
   var self = this;
   this.items = ko.observableArray([
    new Item(products[0], 1),
    new Item(products[1],2)
   ]);
   // 订单总价
   this.price = ko.computed(function() {
    var p = 0;
    for (var i = 0; i < self.items().length; i++) {
     var item = self.items()[i];
     p += item.product.price * item.amount();
    }
    return p;
   }, self);
   this.remove = function(item) {
    self.items.remove(item);
   };
   this.addComputer = function () {
    self.items.push(new Item(products[2], 1));
   };
  }
  // 订单项类
  function Item(product, amount) {
   var self = this;
   this.product = product;
   this.amount = ko.observable(amount);
   // 订单项总价
   this.subTotal = ko.computed(function() {
    return self.amount() * self.product.price;
   }, self);
  }
   
  ko.applyBindings(new Order());
 </script>
</body>
</html>

五、模板
看完以上几个例子，其实你应该感觉到KO（KnockoutJS的简称）的上手还是非常简单的。因为其语法都非常容易理解，接下来看下KO中模板的使用。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Demo5-模板绑定</title>
  
 <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
 <body>
  <!--模板绑定，div的内容为personTemplate模板内的标签-->
  <!--即最终生成如下标签-->
  <!--<div>
   <p>Name: <strong data-bind="text: name"></strong></p>
   <p>Age: <strong data-bind="text: age"></strong></p>
  </div>-->
  <div data-bind="template:'personTemplate'"></div>
   
  <script id="personTemplate" type="text/html">
   <p>Name: <strong data-bind="text: name"></strong></p>
   <p>Age: <strong data-bind="text: age"></strong></p>
  </script>
  <script type="text/javascript">
   var ViewModel = {
    name: ko.observable('Tommy'),
    age: ko.observable(28),
    makeOlder: function() {
     this.age(this.age() + 1);
    }
   };
    
   ko.applyBindings(ViewModel);
  </script>
 </body>
</html>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Demo6-模板绑定</title>
  
 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
 <body>
  <h2>Participants</h2>
  Here are the participants:
  <div data-bind="template: { name: 'persontemplate', foreach: people }"></div>
  <script type="text/html" id="persontemplate">
   <h3 data-bind="text: name"></h3>
   <p>Age: <span data-bind="text: age"></span></p>
  </script>
  <script type="text/javascript">
   function MyViewModel() {
    this.people = [
     { name: 'Tommy', age: 27 },
     { name: 'Frank', age: 33 }
    ];
   }
   ko.applyBindings(new MyViewModel());
  </script>
 </body>
</html>

关于模板更多的使用参考官方文档：http://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。

六、总结
到此，KnockoutJs的快速入门的内容就结束了，在下一篇文章中继续为大家介绍KO内容，下一篇文章的内容将介绍如何使用KO来做一个实际的项目，大家不要错过哦。

补充：

myObservableArray.push('Some new value') 在数组末尾添加一个新项
myObservableArray.pop() 删除数组最后一个项并返回该项
myObservableArray.unshift('Some new value') 在数组头部添加一个 项
myObservableArray.shift() 删除数组头部第一项并返回该项
myObservableArray.reverse() 翻转整个数组的顺序
myObservableArray.sort() 给数组排序

转载于:https://www.cnblogs.com/lu2527/p/8087230.html

knockout学习相关推荐

  1. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  2. knockout学习笔记

    学习knockout路程中记下的一些容易遗忘和稍微难理解的知识点,学习地址"knockout.js爱整理" 1.<!–ko–>和<!–/ko–>的用法 有时 ...

  3. Knockout学习教程

    Knockout介绍 Knockout.js是什么?Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良 ...

  4. knockout学习第一步

    第一次接触knockout,就感觉和ng有太多神似!MVVM框架中Angular是好,但这么大而全的框架,学习难度可不低呢,上手起码也得要个一两周吧.而knockoutjs专注于数据绑定,只需一两天就 ...

  5. Knockout学习之前言

    Knockout官网 Knockout第三方表单验证插件 转载于:https://www.cnblogs.com/TiestoRay/p/4123782.html

  6. knockout 学习笔记

    1.激活knockout ko.applayBindings() 第一个参数是激活ko时用于声明绑定的View Model的对象 (myViewModel= {personName: 'Bob',pe ...

  7. Knockout学习 - data-bind

    data-bind是在html的dom元素属性中声明一些样式/事件/值的绑定, 但Html本身就有这些如class/style/event/value等属性, 那为什么还要用Knockout去bind ...

  8. Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

    ko对于数组列表,监控跟踪属性值关键字为:observableArray, 绑定值关键字为:foreach @{ViewBag.Title = "Index3"; }<h2& ...

  9. Knockout学习笔记之二（$root，$parent及$data的区别）

    以下是我从Google上找到的一个例子,非常生动形象,我修改了部分代码,具体内容如下: 对于$root 与$parent的区别: $root refers to the view model appl ...

最新文章

  1. CentOS 6.5下Redis安装配置记录
  2. eku php,WPSeku安装与使用：WordPress 安装漏洞扫描器
  3. 在malloc函数中为什么常用sizeof来设定内存分配的大小？
  4. Oracle数据库基本概念理解（1）
  5. 元素属性的添加删除（原生js）
  6. threadgroup_Java ThreadGroup list（）方法与示例
  7. Clion添加Posix消息队列的-lrt连接
  8. updataxml报错注入
  9. 使用联想恢复盘安装正版Win7 Professional
  10. 关于ITIL4 认证你必须了解的知识
  11. 【教你Win7下如何激活快速启动栏】
  12. 公差与配合查询的相关术语
  13. tcc-transaction深入理解
  14. 回看共识层进化规律，“POS+”也许是公链后期发展的出路
  15. 数据化管理 - 洞悉零售及电商运营【初始】
  16. JavaScript补齐指定位数
  17. 2020黑客大会——深入浅出现代Windows Rootkit
  18. RFID技术如何解决鞋帽行业应用
  19. 如何有效解决windows无法访问指定设备
  20. 大数据课程——Storm综合应用

热门文章

  1. 16QAM学习（一）串入并出的具体实现
  2. SmartRefreshLayout刷新加样式
  3. 用keil5新建一个工程（STM32F407ZGT6）
  4. 第四章——Web镇之旅：连接起来
  5. TIPTOP ERP上线-财务端辅导讲义
  6. 亚马逊测评，三分钟带你吃透全过程。
  7. 服务器未响应 重新投递中,邮件无法收到
  8. **CAD2018入门到精通全套制图实战**
  9. JavaScript开发者应懂的33个概念
  10. 系统主数据管理之物料（Item）三 Item 的类别（Category）