Knockout+RequireJS+Sammy搭建简单的SPA脚手架

浏览数：35 / 时间：2015年06月09日

下载链接：spa

主要功能如下：

1.提供一个主应用框架，包含路由功能，视图动态加载以及基本的错误处理

2.脚本和模板的模块化管理

3.对子视图的支持

除了标题上的三个库，还用到了一个很不错的knockout扩展：

knockout-amd-helper

https://github.com/rniemeyer/knockout-amd-helpers

这个扩展主要目的是以module形式加载viewmodel和template，模板加载基于requirejs text,详细内容可以自己了解。

脚手架包含以下内容：

/index.html 应用框架页

/scripts/main.js requirejs配置文件及应用程序入口

/scripts/lib 使用的第三方库

/scripts/modules/*.js module脚本

/scripts/templates/*. tmpl.html module模板

/scripts/modules/app.js 主程序模型

首先看index.html

 1 <html>
 2   <head>
 3     <link type="text/css" href="content/main.css" rel="stylesheet"/>
 4   </head>
 5 
 6   <body>
 7     <!-- ko  -->
 8     <ul class="menus" data-bind="foreach:menus">
 9       <li><a href="#" data-bind="text:title,attr:{href:route}"></a></li>
10     </ul>
11     <div data-bind="module:moduleOptions,visible:!loading()">
12     </div>
13     <div data-bind="visible:loading()">
14       Loading...
15     </div>
16     <!-- /ko -->
17     <script type="text/javascript" data-main="scripts/main.js" src="scripts/lib/require.js"></script>
18   </body>
19 </html>

View Code

内容很简单，包含菜单，内容视图，以及一个加载状态块，最后的脚本是requirejs的主脚本。

main.js

 1 require.config({
 2     baseUrl: ‘/scripts‘,
 3     paths: {
 4     "jquery": "lib/jquery-2.1.1",
 5     "text": "lib/text",
 6     "knockout":"lib/knockout-3.1.0.debug",
 7     "ko-amd":"lib/knockout-amd-helpers",
 8     "sammy":"lib/sammy-0.7.4",
 9     "app":"modules/app"
10   },
11   shim: {
12     "jquery":{
13       exports:"jquery"
14     },
15     "sammy": {
16       deps:["jquery"]
17     }
18   }
19 });
20 
21 require(["knockout", "app", "ko-amd"], function(ko, app){
22     ko.bindingHandlers.module.baseDir = "modules";
23   ko.amdTemplateEngine.defaultPath = "templates";
24   
25   ko.applyBindings(new app());
26 });

View Code

require的config内容就不用说了，main.js另外配置了knockout-amd-helper的模块路径，加载并启动了app.js

app.js

 1 define(["knockout", "sammy"],function(ko, Sammy){
 2   return function(){
 3     var self = this;
 4     
 5     self.menus = ko.observableArray([
 6       { title:"主页", route:"#" },
 7       { title:"菜单一", route:"#/area1/list1" },
 8       { title:"菜单二", route:"#/area1/list2" }
 9     ]);
10     
11     self.loading = ko.observable(false);
12     self.moduleOptions = ko.observable({});
13     self.loadError = ko.observableArray(false);
14     self.updateError = ko.observable(false);
15     
16     self.updateError.subscribe(function(error){
17       if (error){
18         alert(error);
19         
20         self.updateError(false);
21       }
22     });
23     
24     self.loadError.subscribe(function(error){
25       if (error){
26         self.moduleOptions({ name:"error", data: {app: self }});
27       }
28     });
29     
30     Sammy(function(){
31       this.get(‘#home‘, function () {
32         self.moduleOptions({ name: "home", data: { app: self }});
33         self.loading(true);
34       });
35 
36       this.get(/\#\/([^/]+)\/([^/]+)/, function () {
37         var area = this.params.splat[0];
38         var module = this.params.splat[1];
39         
40         self.moduleOptions({ name: area + "/" + module, data: { app:self, data:{} }});
41         self.loading(true);
42       });
43       
44       this.get(‘/index.html‘, function () { this.app.runRoute(‘get‘, ‘#home‘) });
45     });
46     
47     Sammy().run();
48   }
49 });