当前位置: 首页 > 工具软件 > Durandal > 使用案例 >

Durandal开发起航

澹台承
2023-12-01

   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

 类似资料: