KnockoutJs快速入门教程


Posted in Javascript onMay 16, 2016

一、引言

之前这个系列文章已经介绍Bootstrap,详情请查看本文: 《Bootstrap入门教程》 ,由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——KnockoutJs。

二、KnockoutJs是什么?

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

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

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

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.单向绑定

<!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函数,下面具体看看双向绑定的例子:

<!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函数来完成依赖跟踪。具体例子的实现代码如下所示:

<!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>

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

<!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中模板的使用。

<!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>
<!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来做一个实际的项目,大家不要错过哦。

Javascript 相关文章推荐
js 函数的副作用分析
Aug 23 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
解决node修改后需频繁手动重启的问题
May 13 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
JS学习之表格的排序简单实例
May 16 #Javascript
JavaScript操作选择对象的简单实例
May 16 #Javascript
JS组件Bootstrap实现图片轮播效果
May 16 #Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 #Javascript
JS获取元素多层嵌套思路详解
May 16 #Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
You might like
跟我学Laravel之配置Laravel
2014/10/15 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python2与Python3的区别详解
2020/02/09 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python中如何引入第三方模块
2020/05/27 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Java里面如何创建一个内部类的实例
2015/01/19 面试题
大学生求职中的自我评价
2013/10/01 职场文书
施工班组长岗位职责
2014/01/05 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
我的中国梦主题班会
2015/08/14 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
详解TypeScript的基础类型
2022/02/18 Javascript