Knockout+RequireJS+Sammy搭建简单的SPA脚手架
下载链接：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>
内容很简单，包含菜单，内容视图，以及一个加载状态块，最后的脚本是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 });
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 });
主应用程序的ViewModel。这里使用sammy做了简单的路由，包含一个指向“#home”的路由和一个指向“#/{area}/{module}”的路由。
list1.js和list2.js，两个模块的ViewModel，具体代码就不贴了，详细内容可以下载压缩包查看。
list1演示了视图模型的显示，子视图的加载，更新错误显示（使用了alert，当然你可以用其他更风骚的方式显示错误信息。），以及利用sessionStorage保存视图状态。
list2演示了视图加载失败的错误页面跳转。
home
list1
list2(error)
注意：不支持直接在文件系统预览，你需要一个web服务器。
我使用的brackets编辑器自带live preview功能，内置了简单的web服务器，可以直接预览项目，当然你也可以把代码部署到web服务器中查看效果。