你的位置:首页 > 软件开发 > Java > [后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs

[后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs

发布时间:2016-04-17 20:00:16
一、引言  之前这个系列文章已经介绍Bootstrap。由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——Knoc ...

一、引言

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

二、KnockoutJs是什么?

  做.NET开发的人应该都知道,WPF中就集成了MVVM框架,关于WPF系列可以参考我WPF系列:http://www.cnblogs.com/zhili/category/624221.html。所以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元素中。

原标题:[后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。