前段时间安装了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完整实例
