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

2024-04-27 14:19:56

字体：大中小

来源：转载

供稿：网友

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>

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 });

View Code

主应用程序的ViewModel。这里使用sammy做了简单的路由，包含一个指向“#home”的路由和一个指向“#/{area}/{module}”的路由。

list1.js和list2.js，两个模块的ViewModel，具体代码就不贴了，详细内容可以下载压缩包查看。

list1演示了视图模型的显示，子视图的加载，更新错误显示（使用了alert，当然你可以用其他更风骚的方式显示错误信息。），以及利用sessionStorage保存视图状态。

list2演示了视图加载失败的错误页面跳转。

home