前不久在网上看到一个轻量级MVVM js类库叫Knockout.js，觉得很好奇，搜了一下Knockout.js相关资料，也初体验了一下，顿时感觉这个类库的设计很有意思。接下来就搞清楚什么是Knockout.js

Knockout.js有4个重要的概念：（一定要牢记）

1.声明绑定：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

2.UI界面自动刷新：当您的模型状态(model state)改变时，您的UI界面将自动更新。

3.依赖跟踪：为转变和联合数据，在你的模型数据之间隐式建立关系。

4.模板：为您的模型数据快速编写复杂的可嵌套的UI。

Knockout.js工作原理：

是以数据模型为基础，创建响应显示，编辑用户界面的javascript类库，可以自动更新UI界面。主要根据数据的判断和获取来控制UI界面的响应和展示。

接下来一段小例子分解分析：（功能说明：我要选择我想看的类型的书籍，当我选中一种类型，页面就会展示出我要选择的信息，书名和价钱）

首先我们要在页面引用Knockout.js

<script type="text/javascript" src="js/knockout.js"></script>

然后自己在HTML里面添加元素，我拿<select>标签为例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link type="text/css" rel="stylesheet" href="css/klm.css">

</head>

<body>

  <select data-bind="options:dataList,optionsText:'name',value:chosenKlm"></select>

  <table>

      <tr>

          <td>书名：</td>

          <td><h2 data-bind="text:chosenKlm().des"></h2></td>

      </tr>

      <tr>

          <td>价钱：</td>

          <td><p data-bind="text:formatPrice(chosenKlm().price)"></p></td>

      </tr>

  </table>

</body>

<script type="text/javascript" src="js/knockout.js"></script>

<script type="text/javascript" src="js/klm.js"></script>

</html>

网页显示截图如下：

通过上面的HTML标签都可以看到一个自定义参数data-bind,这个参数在整个页面发挥很重要的作用，绑定语法的入口，通过这个自定义参数可以实现很多功能，这就是Knockout.js魅力所在。

从页面截图看到默认书类型为故事类，书名：故事会，价钱：0 这里我在js中做了一个三元表达式的判断，

主要看js写法和展现的结构，单独定义了一个klm.js用来处理页面逻辑：

/**

 * Created by 蒯灵敏 on 15-2-12.

 */

//创建假数据

var  dataList = [

    { name: '故事类', des: '故事会', price: 0 },

    { name: '文学类', des: '红楼梦', price: 50 },

    { name: '科幻类', des: '星球大战', price: 19.952 },

    { name: '笑话类', des: '逗比趣事', price: 18.503 }

];

//编辑显示的价钱格式

var formatPrice= function(price){

    return price == 0 ? 0: "$" + price.toFixed(2);

};

var viewModel = {

    chosenKlm: ko.observable(dataList[0])

};

ko.applyBindings(viewModel);

首先定义了一个dataList用来模拟用到的数据，然后创建一个viewModel,用来把数据绑定到DOM节点上去，并且Knockout.js提供一个observable函数用来监控数据的作用。在这里单单创建一个viewModel是无法让页面进行数据交互的，需要通过appplyBindings函数来进行绑定才能实现页面交互效果；

ko.applyBindings有2个参数：第一个用于声明式绑定，第二个可选的，可以声明成使用data-bind的HTML元素或者容器，例如， ko.applyBindings(viewModel, document.getElementById('myid'))

例子网址：http://105.kuailingmin.sinaapp.com/klm.html

Knockout.js初体验的更多相关文章

  1. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  2. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  3. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. node.js 初体验

    node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

  5. 范仁义web前端介绍课程---4、html、css、js初体验

    范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...

  6. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  7. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  8. vue.js——初体验

    看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...

  9. Node.js初体验

    1.Node.js是什么 [1]Node是一个server端 JavaScript 解释器,但是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了.总结:水深不深我还不知道, ...

随机推荐

  1. PHP面向对象——静态属性和静态方法

    静态属性 所谓静态属性,也就是这个属性对于这个类来说是唯一的,不管有多少个对象,只要它引用了一个静态对象,那么这些对象引用出来的值肯定是同一个. 静态变量不能使用->这种箭头符号,而是使用::这 ...

  2. MVC – 9.mvc整体请求流程

    1.请求管道 2~5微软自己的验证,我们一般不用. 在全局配置文件中-已经配置一个路由过滤器-为第7个事件注册了路由方法   1.在application_start中向静态路由表注册了路由数据,在管 ...

  3. How to increase TX Power Signal Strength of WiFi

    转自:https://www.blackmoreops.com/2013/10/27/how-to-increase-tx-power-signal-strength-of-wifi/ This gu ...

  4. ArcGIS图层和要素的过滤显示

    ArcGIS可以设置动态地图服务(ArcGISDynamicMapServiceLayer)显示哪些图层,也可以设置每个图层根据某个属性字段的某些条件来进行过滤显示. 1.设置显示的图层 主要是通过A ...

  5. 攻城狮在路上（肆）How tomcat works（一） 简单的web服务器

     该节总共三个类:Request\Response\HttpServer---user.dir     该节的目的是实现简单web服务器对静态文件的访问.需要对请求头.请求体的格式有所了解,不然就没有 ...

  6. oracle删除用户下所有的表

    需要创建这些删除语句,通过oracle的数据字典找到该用户下的所有表.视图等对象,拼接成语句.如下select 'drop table '||table_name|| ' cascade constr ...

  7. 分佈式事務故障處理暨ORA-24756: transaction does not exist處理

    ORA-24756处理 看到警告日誌一直報ORA-24756錯誤 Errors in file /oracle/admin/NHMIX01/bdump/nhmix01_reco_4959.trc: O ...

  8. Axure 全局辅助线(转)

    普通辅助线作用于当前页 全局作用于所有页面 , 包括新建页面 创建普通辅助线直接拉出来 创建全局辅助线 , 在拉出来的时候按住 Ctrl 默认情况下 , 颜色不同 辅助线可以多选 , 用拖选 或 按 ...

  9. matlab练习程序（Sepia Tone滤镜）

    我手机上有一个软件实现了很多图像滤镜,挺有意思,我打算都尝试一下. 这个滤镜主要是实现老照片效果. 代码很短,我就不详细介绍了. 原图: 处理后效果: matlab代码如下: clear all;cl ...

  10. poj 1816 (Trie + dfs)

    题目链接:http://poj.org/problem?id=1816 思路:建好一颗Trie树,由于给定的模式串可能会重复,在原来定义的结构体中需要增加一个vector用来记录那些以该节点为结尾的字 ...