標籤：style blog http color java os 使用 io 檔案
下載連結：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
list1
list2(error)
注意：不支援直接在檔案系統預覽，你需要一個web伺服器。
我使用的brackets編輯器內建live preview功能，內建了簡單的web伺服器，可以直接預覽項目，當然你也可以把代碼部署到web伺服器中查看效果。
Knockout+RequireJS+Sammy搭建簡單的SPA腳手架
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
