最近在學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>
}
