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