19 Knockout JS介绍
1. Knockout JS介绍
Knockout 是一个轻量级的UI 类库，通过应用MVVM 模式使JavaScript 前端UI开发更加简单， Knockout的四大概念如下：
声明式绑定：使用简明易读data-bind属性, 很容易地将模型(model)数据关联到DOM元素上。
UI界面自动刷新：当您的模型状态(model state)改变时，您的UI界面将自动更新。
依赖跟踪：为转变和联合数据，在你的模型数据之间隐式建立关系。
模板：为您的模型数据快速编写复杂的可嵌套的UI。
2.MVVM图
3.MVVM介绍
模型-视图-视图模型（MVVM）是一种设计模式, 用来构建用户界面，它描述了如何让一个复杂的UI界面分解成3个部分： ：
1)模型 Model
你应用存储的数据.数据包括对象和业务操作（例如：银子账户可以完成转账功能）并且独立于任何的UI,使用KO的时候，通常说是向服务器调用Ajax读写存储的模型数据。
2)视图模型 ViewModel
在UI上，纯Code描述的数据以及操作。例如，如果你实现列表编辑，你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项（item）的操作方法。
3)视图 View
一个可见的，交互式的，表示view model状态的UI。使用KO的时候，你的view就是你带有绑定信息的HTML文档，这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。
4.Knockout示例Html
<html>
<head>
<script src="../../../Scripts/knockout-2.3.0.js"></script>
<script src="../../../Scripts/jquery-1.9.1.js"></script>
<script src="../../Global/Scripts/ProjectManagentModify.js"></script>
</head>
<body>
<form id="form1" action="">
<table align="center" width="770" border="0">
<tr>
<td align="center" colspan="4">
项目名称：<input id="txtProjectPlan" type="text" width="600" data-bind="value:ProjectName" />
</td>
</tr>
<tr>
<td align="center" colspan="4">
里程碑：<input id="txtMileStones" type="text" width="600" data-bind="value:MileStone" />
</td>
</tr>
<tr>
<td align="center" colspan="4">
<a data-bind="click: SubmitForm">修改</a> <a data-bind="click: goToListPage">返回列表</a>
</td>
</tr>
</table>
</form>
</body>
</html>
5.Knockout示例ProjectManagentModify.js
$(document).ready(function ()
{
//业务模型
var viewModel = {
//创建两个监控属性
ProjectName: ko.observable(),
MileStone: ko.observable(),
//查询详细
GetDetail: function () {
var index = viewModel.getQueryString("id"); //获取传入的id编号
$.getJSON("/api/ProjectManagent/" + index,
function (data) {
viewModel.ProjectName(data.ProjectName);
viewModel.MileStone(data.MileStones);
})
.fail(function () { alert('error'); }
);
},
//点击提交按钮
SubmitForm: function () {…}
};
//绑定界面元算与Knockout
ko.applyBindings(viewModel);
//获取初始的详细数据
viewModel.GetDetail();
});
