Home > Developer > Web Develop
Download Link: Spa
The main functions are as follows:
1. Provide a main application framework, including routing capabilities, view dynamic loading and basic error handling
2. Modular management of scripts and templates
3. Support for child views
In addition to the three libraries on the header, a good knockout extension is used:
Knockout-amd-helper
Https://github.com/rniemeyer/knockout-amd-helpers
The main purpose of this extension is to load viewmodel and templates in the form of module, template loading based on Requirejs text, detailed content can be understood.
Scaffolding contains the following contents:
/index.html Application Frames page
/scripts/main.js Requirejs configuration file and application portal
Third-party libraries used by/scripts/lib
/scripts/modules/*.js Module Script
/scripts/templates/*. tmpl.html Module Template
/scripts/modules/app.js Main program Model
First Look at index.html
1 <HTML>2 <Head>3 <Linktype= "Text/css"href= "Content/main.css"rel= "stylesheet"/>4 </Head>5 6 <Body>7 <!--Ko -8 <ulclass= "Menus"Data-bind= "Foreach:menus">9 <Li><ahref="#"Data-bind= "Text:title,attr:{href:route}"></a></Li>Ten </ul> One <DivData-bind= "module:moduleoptions,visible:!loading ()"> A </Div> - <DivData-bind= "visible:loading ()"> - Loading ... the </Div> - <!--/ko - - <Scripttype= "Text/javascript"Data-main= "Scripts/main.js"src= "Scripts/lib/require.js"></Script> - </Body> + </HTML>View Code
The content is simple, contains the menu, the content view, and a loading state block, and the final script is the main script of the Requirejs.
Main.js
1 Require.config ({2BASEURL: '/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"Ten }, One Shim: { A"jquery":{ -Exports: "jquery" - }, the"Sammy": { -deps:["jquery"] - } - } + }); - +Require (["knockout", "app", "KO-AMD"],function(KO, app) { AKo.bindingHandlers.module.baseDir = "Modules"; atKo.amdTemplateEngine.defaultPath = "Templates"; - -Ko.applybindings (Newapp ()); -});View Code
Require config content is needless to say, Main.js also configured the Knockout-amd-helper module path, loaded and started the App.js
App.js
1Define (["Knockout", "Sammy"],function(KO, Sammy) {2 return function(){3 varSelf = This;4 5Self.menus =Ko.observablearray ([6{title: "Home", Route: "#" },7{title: "Menu One", route: "#/area1/list1" },8{title: "Menu II", route: "#/area1/list2" }9 ]);Ten Oneself.loading = Ko.observable (false); ASelf.moduleoptions =ko.observable ({}); -Self.loaderror = Ko.observablearray (false); -Self.updateerror = Ko.observable (false); the -Self.updateError.subscribe (function(Error) { - if(Error) { - alert (error); + -Self.updateerror (false); + } A }); at -Self.loadError.subscribe (function(Error) { - if(Error) { -Self.moduleoptions ({name: "Error", data: {app:self}}); - } - }); in -Sammy (function(){ to This. Get (' #home ',function () { +Self.moduleoptions ({name: "Home"), data: {app:self}}); -Self.loading (true); the }); * $ This. Get (/\#\/([^/]+) \/([^/]+)/, function () {Panax Notoginseng varArea = This. params.splat[0]; - varmodule = This. params.splat[1]; the +Self.moduleoptions ({Name:area + "/" +module, data: {app:self, data:{}}}); ASelf.loading (true); the }); + - This. Get ('/index.html ',function() { This. App.runroute (' Get ', ' #home ') }); $ }); $ - Sammy (). run (); - } the});View Code
The ViewModel of the main application. Here, a simple route is made using Sammy, which contains a route to "#home" and a route pointing to "#/{area}/{module}".
List1.js and List2.js, two modules of the ViewModel, the specific code is not affixed, the details can download the compressed package view.
List1 shows the display of the view model, the loading of the sub-view, the update error display (using alert, of course, you can display the error message in a more coquettish way.) ), and save view state with Sessionstorage.
List2 demonstrates the error page jump for view load failure.
Home
List1
List2 (Error)
Note: Not supported directly in the file system preview, you need a Web server.
I use the brackets editor with the live Preview feature, built-in simple Web server, can preview the project directly, of course you can also deploy the code to the Web server to see the effect.
Knockout+requirejs+sammy Building a simple spa scaffold
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
