knockout + require + director 构建单页面程序(director)

这篇文章介绍一下director的应用,这篇文章只是单独介绍director的引用,如下图所示:

从上图可以看到这篇文章主要介绍的是director的单独应用,具体在这个项目中和knockout,require的协作会在下一篇文章中介绍。当然首先是要下载director.js文件。


一, 项目结构: 引入director文件然后修改对应的main.js,让director也活在require的大环境下吧。

                                                             

图中红线标出来的是此次新增加的文件,对于director.js的引入是肯定的,但是光引入director是不够的,因为director前端路由还是需要初始化及注册路由的,所以加了另外两个新的文件。


二,对应文件的修改:

让我们先看一下main.js文件的修改:

/*
    Author: TS
    Date: 2016/12/24
    Description: It's the main entry point for require.
 */

var paths = {
    /* TODO: register all AMD modules by providing CamelCase aliases, exceptions are RequireJS plugins and named AMD modules, whose names are fixed */
    /* follow files dictionary order */
    'jquery': 'Scripts/lib/jquery',
    "text": "Scripts/lib/text",
    'knockout': 'Scripts/lib/knockout',
    "knockout-amd-helpers": "Scripts/lib/knockout-amd-helpers",

    //Require
    'RequireIntroduction-html': 'templates/require/RequireIntroduction.html',
    "RequireIntroduction-js": 'Scripts/app/require/RequireIntroduction',

    //Knockout
    'KnockoutIntroduction-html': 'templates/knockout/KnockoutIntroduction.html',
    'KnockoutIntroduction-js': 'Scripts/app/knockout/KnockoutIntroduction',

    //Director
    'Router': 'Scripts/lib/director',
    'Routes': 'Scripts/framework/routes',
    'AppRouter': 'Scripts/framework/router'
};

var baseUrl = '/';

require.config({
    baseUrl: baseUrl,
    paths: paths,
    shim: {
        'Router': {
            exports: 'Router'
        }
    }
});

require(["knockout", "KnockoutIntroduction-js", "knockout-amd-helpers", "text"], function (ko, knockoutIntroduction) {
    ko.bindingHandlers.module.baseDir = "modules";

    //fruits/vegetable modules have embedded template
    ko.bindingHandlers.module.templateProperty = "embeddedTemplate";
    ko.applyBindings(knockoutIntroduction);
});

require(['AppRouter'], function () {
    console.log('Start test router'); 
})
main.js的修改就是新增加了Director对应的三个文件,以及最后require(['AppRouter'], function(){....}) 的执行,我们在require的path中添加了director对应的文件,但是没有执行呢,这段代码就是为了执行director的。

从main.js文件中看到AppRouter对应的是router.js文件,让我们先看一下router的代码。

define(['Routes', 'Router'], function (Routes, Router) {
    var router = Router(Routes);

    router.init();
    return router;
});
从代码中可以看到执行这个文件的时候require Routes以及Router, Router就是director文件,而Routes就是director需要注册的路由,这里是将路由单独的放到了一个文件中,后面就是构造路由对象,然后初始化。

最后在来看一下我们路由都注册了哪些东西,也就是Routes文件:

define({
    '/testDirectorFirst': function () { console.log("This is the url for testDirectorFirst") },
    '/testDirectorSecond': function () { console.log("This is the url for testDirectorSecond") },
    '/testDirectorThird': function () { console.log("This is the url for testDirectorThird") }
})
这里就是简单的定义了一下三个方法,用以证明director的应用。

三,测试director:

测试之前当然少不了html的变化,毕竟需要url的change才可以看得出效果,这里我就直接在上篇文章中的Knockoutintroduction.html添加的element。

<div>
    This is the page for knockout!.

    <input data-bind="value: PageName"/>
</div>
<div>
    It's for testing director.

    <ul>
      <li><a href="#/testDirectorFirst">#/testDirectorFirst</a></li>
      <li><a href="#/testDirectorSecond">#/testDirectorSecond</a></li>
      <li><a href="#/testDirectorThird">#/testDirectorThird</a></li>
    </ul>
</div>

这里新添加的就是html页面中的第二个div,里面有三个a标签,对应三个不同的link,大家会看到href 中有一个‘ #’,这是因为director就是监控hash值得变化实现路由的控制,尽管这样不太好看,后面的文章中会将这个#值去掉,毕竟这篇文章还没有与knockout与require的在一起使用,通过最上面的项目结构图示大家也可以看到。




我在页面上依次点击了三个link,控制台打出来我们注册路由定义的方法,到此,director的应用完成了,此后前端url的change就在director的控制之下了。不正之处,望大家提出!


源代码: https://github.com/rodchen-king/knockout_require_director/tree/v1.3



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值