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

首页 > 代码库 > Knockout+RequireJS+Sammy搭建简单的SPA脚手架

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

2024-07-19 05:31:28 221人阅读

下载链接：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 });