Durandal是一个小巧的JavaScript框架,用于创建简单而优雅的单页面应用(SPA)。该项目不准备重复造轮子,因此建立在已知的和大家喜爱的库,如jQuery、 Knockout和RequireJS。
Durandal可用于任何后端或没有后端的场景。开发所需的包括:必要的脚本库,模块和目录结构。
示例程序Durandal StarterKit建立了一个基本的导航类型的架构,包含几个基本的页面。只需创建模块和视图并放到对应的目录,同时在router中注册即可添加用户自己的页面。
1、目录结构
• App
∘ viewmodesl/ 放置js代码,即模块,包含应用相关的代码。
∘ views/ 放置html模板文件,即视图,负责页面布局
∘ main.js 然后js文件,相当于main函数
•index.html
首页页面,定义的applicationHost用户host用户视图,script标签用于指定程序入口,即/app/main.
2、main.js
通用步骤
• 配置ReqireJS
• (可选)打开调试、配置插件,设置标题
• 调用app.start()
• 配置应用相关的conversions
• 配置第三方库
• 设置应用的root
3、viewmodesl/shell.js
利用router注册所需页面
router: router,
activate: function () {
router.map([
{ route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }
]).buildNavigationModel();
return router.activate();
这个文件对应shell.html,正是整个网页的根页面。
4、Model-View结构
如上所述,只需创建模块和视图并放到对应的目录viewmodels 和 views,同时在router中注册即可添加用户自己的页面。
注:API地址:http://durandaljs.com/documentation/api.html