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 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
js实现div在页面拖动效果
May 04 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
js实现上传图片预览方法
Oct 25 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
微信小程序如何连接Java后台
Aug 08 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
js转html实体的方法
2016/09/27 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python 随机按键模拟2小时
2020/12/30 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
三项教育活动实施方案
2014/03/30 职场文书
作文评语大全
2014/04/23 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
新闻学专业求职信
2014/07/28 职场文书
投标承诺函范文
2015/01/21 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
python微信智能AI机器人实现多种支付方式
2022/04/12 Python