Knockout.js初体验

前不久在网上看到一个轻量级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'))

klm.html