前段時間安裝了VS2012的旗艦版，發現在自動創建的項目中自帶了一個knockout.js的文件，Google之后發現這是一個js類庫，而且非常好用。特別是結合JQuery來做一些數據綁定列表，和實現一些無刷新操作的時候非常簡單。在官網上學習了下，並且依樣畫蘆的做了幾個demo,下面抽出其中一個最常用的例子和大家分享。
先看下效果圖：
具體代碼實現：
1
<!
DOCTYPE html
>
2 < html >
3 < head >
4 < base href ="http://learn.knockoutjs.com/" />
5 < script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ script >
6 < script type ='text/javascript' src ='/Scripts/Lib/knockout-2.1.0.js' ></ script >
7
8 < script type ='text/javascript' src ='/scripts/lib/sammy.js' ></ script >
9
10 < link rel ="Stylesheet" href ="/Content/App/coderunner.css" />
11 < link rel ="Stylesheet" href ="/Content/TutorialSpecific/webmail.css" />
12 </ head >
13 < body >
14 < ul class ="folders" data-bind ="foreach: folders" > <!-- 循環遍歷viewModel中的數據 -->
15 < li data-bind ="text: $data,
16 css: { selected: $data == $root.chosenFolderId() },
17 click: $root.goToFolder" ></ li > <!-- text: $data 獲取數據的值 } -->
18 </ ul >
19
20 < table class ="mails" data-bind ="with: chosenFolderData" > <!-- 驗證數據源是否為null -->
21 < thead >< tr >< th >From </ th >< th >To </ th >< th >Subject </ th >< th >Date </ th ></ tr ></ thead >
22 < tbody data-bind ="foreach: mails" > <!-- 循環遍歷一個從后台返回的IEnumerable<mails>的json數據 -->
23 < tr data-bind ="click: $root.goToMail" > <!-- 調用函數 -->
24 < td data-bind ="text: from" ></ td > <!-- 具體數據內容 -->
25 < td data-bind ="text: to" ></ td >
26 < td data-bind ="text: subject" ></ td >
27 < td data-bind ="text: date" ></ td >
28 </ tr >
29 </ tbody >
30 </ table >
31
32 < div class ="viewMail" data-bind ="with: chosenMailData" > <!-- 驗證數據源是否為null -->
33 < div class ="mailInfo" >
34 < h1 data-bind ="text: subject" ></ h1 > <!-- 具體數據內容 -->
35 < p >< label >From </ label >: < span data-bind ="text: from" ></ span ></ p >
36 < p >< label >To </ label >: < span data-bind ="text: to" ></ span ></ p >
37 < p >< label >Date </ label >: < span data-bind ="text: date" ></ span ></ p >
38 </ div >
39 < p class ="message" data-bind ="html: messageContent" />
40 </ div >
41
42 < script type ="text/javascript" >
43 function WebmailViewModel() {
44 // Data
45 var self = this;
46 self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
47 self.chosenFolderId = ko.observable(); // 監控id
48 self.chosenFolderData = ko.observable(); // 監控數據列表
49 self.chosenMailData = ko.observable(); // 監控詳情數據
50
51 /* self.goToFolder = function(folder) {
52 self.chosenFolderId(folder);
53 self.chosenMailData(null); // Stop showing a mail
54 $.get('/mail', { folder: folder }, self.chosenFolderData);//self.chosenFolderData這一步其實就是獲得數據（簡寫的方式）
55 };
56
57 self.goToMail = function(mail) {
58 self.chosenFolderId(mail.folder);
59 self.chosenFolderData(null); // Stop showing a folder
60 $.get("/mail", { mailId: mail.id }, self.chosenMailData);
61 }; */
62
63 self.goToFolder = function(folder) { location.hash = folder }; // location.hash可以用來獲取或設置頁面的標簽值,在地址欄里顯示出路徑
64 self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };
65
66 Sammy( function() {
67 this.get('#:folder', function() {
68 self.chosenFolderId( this.params.folder);
69 self.chosenMailData( null);
70 $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
71 });
72
73 this.get('#:folder/:mailId', function() {
74 self.chosenFolderId( this.params.folder);
75 self.chosenFolderData( null);
76 $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
77 });
78
79 this.get('', function() { this.app.runRoute('get', '#Inbox') });
80 }).run();
81
82 self.goToFolder('Inbox');
83 };
84
85 ko.applyBindings( new WebmailViewModel());
86 </ script >
87 </ body >
88 </ html >
2 < html >
3 < head >
4 < base href ="http://learn.knockoutjs.com/" />
5 < script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ script >
6 < script type ='text/javascript' src ='/Scripts/Lib/knockout-2.1.0.js' ></ script >
7
8 < script type ='text/javascript' src ='/scripts/lib/sammy.js' ></ script >
9
10 < link rel ="Stylesheet" href ="/Content/App/coderunner.css" />
11 < link rel ="Stylesheet" href ="/Content/TutorialSpecific/webmail.css" />
12 </ head >
13 < body >
14 < ul class ="folders" data-bind ="foreach: folders" > <!-- 循環遍歷viewModel中的數據 -->
15 < li data-bind ="text: $data,
16 css: { selected: $data == $root.chosenFolderId() },
17 click: $root.goToFolder" ></ li > <!-- text: $data 獲取數據的值 } -->
18 </ ul >
19
20 < table class ="mails" data-bind ="with: chosenFolderData" > <!-- 驗證數據源是否為null -->
21 < thead >< tr >< th >From </ th >< th >To </ th >< th >Subject </ th >< th >Date </ th ></ tr ></ thead >
22 < tbody data-bind ="foreach: mails" > <!-- 循環遍歷一個從后台返回的IEnumerable<mails>的json數據 -->
23 < tr data-bind ="click: $root.goToMail" > <!-- 調用函數 -->
24 < td data-bind ="text: from" ></ td > <!-- 具體數據內容 -->
25 < td data-bind ="text: to" ></ td >
26 < td data-bind ="text: subject" ></ td >
27 < td data-bind ="text: date" ></ td >
28 </ tr >
29 </ tbody >
30 </ table >
31
32 < div class ="viewMail" data-bind ="with: chosenMailData" > <!-- 驗證數據源是否為null -->
33 < div class ="mailInfo" >
34 < h1 data-bind ="text: subject" ></ h1 > <!-- 具體數據內容 -->
35 < p >< label >From </ label >: < span data-bind ="text: from" ></ span ></ p >
36 < p >< label >To </ label >: < span data-bind ="text: to" ></ span ></ p >
37 < p >< label >Date </ label >: < span data-bind ="text: date" ></ span ></ p >
38 </ div >
39 < p class ="message" data-bind ="html: messageContent" />
40 </ div >
41
42 < script type ="text/javascript" >
43 function WebmailViewModel() {
44 // Data
45 var self = this;
46 self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
47 self.chosenFolderId = ko.observable(); // 監控id
48 self.chosenFolderData = ko.observable(); // 監控數據列表
49 self.chosenMailData = ko.observable(); // 監控詳情數據
50
51 /* self.goToFolder = function(folder) {
52 self.chosenFolderId(folder);
53 self.chosenMailData(null); // Stop showing a mail
54 $.get('/mail', { folder: folder }, self.chosenFolderData);//self.chosenFolderData這一步其實就是獲得數據（簡寫的方式）
55 };
56
57 self.goToMail = function(mail) {
58 self.chosenFolderId(mail.folder);
59 self.chosenFolderData(null); // Stop showing a folder
60 $.get("/mail", { mailId: mail.id }, self.chosenMailData);
61 }; */
62
63 self.goToFolder = function(folder) { location.hash = folder }; // location.hash可以用來獲取或設置頁面的標簽值,在地址欄里顯示出路徑
64 self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };
65
66 Sammy( function() {
67 this.get('#:folder', function() {
68 self.chosenFolderId( this.params.folder);
69 self.chosenMailData( null);
70 $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
71 });
72
73 this.get('#:folder/:mailId', function() {
74 self.chosenFolderId( this.params.folder);
75 self.chosenFolderData( null);
76 $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
77 });
78
79 this.get('', function() { this.app.runRoute('get', '#Inbox') });
80 }).run();
81
82 self.goToFolder('Inbox');
83 };
84
85 ko.applyBindings( new WebmailViewModel());
86 </ script >
87 </ body >
88 </ html >
Demo:Knockout.js完整實例