最近在学Knockout.js，想要把看到的东西用blog记录下来。
Knockout.js是一个MVVM的框架，突然想起之前有人问我哪些是MVVM框架？我回答了angular.js和bootstrap(糗)，现在看了些博客，书，粗略的了解了MVVM是什么？
MVVM即Model，ViewModel,View
Model:数据模型
View：视图/UI
ViewModel：用于视图和模型的之间的数据传递。
我了解的MVVM是指大部分数据的处理用js完成，后台返回Model，通过ViewModel将数据绑定到UI。同时也可以在ViewModel中进行大部分的数据处理。有修改仅需修改ViewModel，非常方便。
Knockoutjs有监控，追踪的功能，即可以双向绑定数据。（之前的开发过程中有遇到页面没有刷新，也没有重新获取修改后数据导致后台拿到的还是修改之前的数据，这个bug找了蛮久，我觉得可以用knockoutjs双向绑定来解决）
双向绑定带来了一个好处，即不论是UI改变，还是后台传过来的Model有所变化，knockoutjs都能感知得到，这就是ko.observable()，ko.observabkeArray(),ko.computed()的功劳了。
下面看一段简单的程序：我要在页面上显示姓名，并且可以姓名可以随着我改变姓或者名而变化 <html> <head> <title>Kong's Website</title> <script src="~/Scripts/knockout-3.5.1.js"></script> <script src="~/Scripts/jquery-3.3.1.js"></script> </head> <body> <p>firstName:<input type="text" data-bind="value:firstName" /></p> <p>lastName:<input type="text" data-bind="value:lastName" /></p> <p>firstName:<strong data-bind="text:firstName"></strong></p> <p>lastName:<strong data-bind="text:lastName"></strong> </p> </body> </html> @section scripts{ <script> function viewModel() { var self = this; self.firstName = ko.observable("Cherry"); self.lastName = ko.observable("Li"); } var viewModel = new viewModel(); ko.applyBindings(viewModel); </script> }
我要显示全名 即 姓+名，只需要添加在lastName后面添加
<p>fullName:<strong data-bind="text:fullName"></strong></p>
在viewModel中添加
self.fullName = ko.computed(function () { return self.firstName() + " " + self.lastName(); });
比如我要在页面显示一个table
<html>
<head>
<title>Kong's Website</title>
<script src="~/Scripts/knockout-3.5.1.js"></script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-bind="foreach:Person">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:type"></td>
</tr>
</tbody>
</table>
</body>
</html>
@section scripts{
<script>
function viewModel() {
var self = this;
self.Person = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);
}
var viewModel = new viewModel();
ko.applyBindings(viewModel);
</script>
}
