因此，我們推出了一個Kickstarter來幫助我們在2014年完成一些神奇的事情，希望你能關(guān)注。但現(xiàn)在，我將向你展示如何開發(fā)一個簡單的Durandal程序。
要開始使用Durandal，可以有多種方式，這取決于你的平臺。因為Durandal是一個純JavaScript庫，獨立于任何服務端平臺，我們嘗試用多種方式來打包，以滿足各類Web開發(fā)人員。在本教程中，我們將直接使用HTML Starter Kit。你可以在官方網(wǎng)站上直接下載。
下載完HTML Starter Kit后，解壓縮，你就可以直接在Firefox各版本中打開index.html頁面，運行其示例程序了?；蛘吣阋部梢詫⑵洳渴鸬絎eb服務器中，瀏覽其index頁面。
Starter Kit演示了一個基本的導航架構(gòu)，包括導航、頁面歷史、數(shù)據(jù)綁定、模態(tài)對話框等等。當然，我們不只是看看而已，我們要從頭開始寫一個小程序。首先打開app文件夾，刪除里面的所有內(nèi)容，然后刪除index.html。這樣我們就有了一個空項目，并且預配置了所有必須的scripts和css。
*注：IE, Chrome和Safari可能無法從文件系統(tǒng)中直接打開這類文件。如果你仍希望使用這些瀏覽器，可以將其部署到你喜歡的Web服務器中。
Index.html
我們開始編寫index.html文件，內(nèi)容如下：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" /> <link rel="stylesheet" href="lib/durandal/css/durandal.css" /> <link rel="stylesheet" href="css/starterkit.css" /> </head> <body> <div id="applicationHost"></div> <script src="lib/require/require.js" data-main="app/main"></script> </body> </html>
我們看到，文件中只有一些css樣式文件，一個id為applicationHost的簡單的div， ，一個script標簽。我們加上了Bootstrap和FontAwesome，使界面看起來美觀一些，但它們并不是Durandal所必須的。我們要關(guān)注的關(guān)鍵代碼是script標簽。
Durandal采用RequireJS作為其核心構(gòu)件之一，鼓勵模塊化的編程方式。在Durandal應用中，所有的JS代碼都寫在模塊中。上文index.html中的script標簽就是用于加載RequireJS來完成框架的模塊策略。當模塊加載器完成初始化后，它通過data-main屬性的值來啟動應用。就像C語言中的main函數(shù)一樣，data-main屬性指向的是主模塊，是整個應用的入口。讓我們進行下一步，創(chuàng)建這個模塊。首先創(chuàng)建一個名為main.js的文件，把它放到app文件夾下。其代碼如下：
main.js requirejs.config({ paths: { 'text': '../lib/require/text', 'durandal':'../lib/durandal/js', 'plugins' : '../lib/durandal/js/plugins', 'transitions' : '../lib/durandal/js/transitions', 'knockout': '../lib/knockout/knockout-2.3.0', 'jquery': '../lib/jquery/jquery-1.9.1' } }); define(function (require) { var system = require('durandal/system'), app = require('durandal/app'); system.debug(true); app.title = 'Durandal Starter Kit'; app.configurePlugins({ router:true, dialog: true }); app.start().then(function() { app.setRoot('shell'); }); });這是一個非常標準的Durandal應用的樣板配置。我們詳細地看一下代碼。
文件的最上面是requirejs.config代碼。這部分代碼用于配置模塊系統(tǒng)，使其能夠找到核心庫。配置的都是一些相對路徑，因此當我們引用“jQuery”時，模塊系統(tǒng)就知道到哪里去加載它。我們可以看到，路徑的配置包括requirejs的text插件（用于加載視圖）、Durandal的核心模塊、Knockout和jQuery。Durandal采用RequireJS來構(gòu)建模塊，Knockout用于數(shù)據(jù)綁定，而jQuery用于瀏覽器層的抽象。
完成RequireJS的配置后，定義應用的主模塊。Durandal應用的所有代碼都寫在模塊中，并且按照以下格式：
define(function (require) { var someModule = require('some/module'); ...other modules required here... return someValue; });我們用define函數(shù)來創(chuàng)建一個模塊。它的參數(shù)是另一個函數(shù)，這個函數(shù)是模塊的工廠。也就是說，這個函數(shù)的返回值將是模塊的一個實例。當函數(shù)返回一個對象時，你可以創(chuàng)建單例對象模塊?；蛘叻祷匾粋€函數(shù)，你可以創(chuàng)建一個類構(gòu)造器模塊。另外，你也可以聲明該模塊依賴于其他模塊，此時你需要使用require函數(shù)來引入其他模塊。
在上面的主模塊代碼中，你可以看到我們引入或者說require了兩個Durandal模塊：system和app。然后通過system模塊開啟框架的調(diào)試功能，通過app模塊設(shè)置應用的標題，加載兩個可選的插件。最后，我們調(diào)用start方法啟動應用。該方法是一個異步的動作，當它結(jié)束時，調(diào)用一個特殊的方法：setRoot。
當setRoot方法被調(diào)用時，才會真正去展示頁面。你可以將root視為應用的主窗口、主布局或者應用的shell。該方法的參數(shù)指向一個包含shell的行為的模塊?，F(xiàn)在唯一的問題是，嗯，它還不存在。好吧，我們開始創(chuàng)建它。
Durandal的大部組件都同時包含行為（behavior）和展現(xiàn)（presentation）。你的應用的shell毫無疑問也遵循這個規(guī)則。我們將通過兩個文件來展示這兩個不同的概念：一個是用于行為的JavaScript文件，另一個是用于展現(xiàn)的HTML文件。在app文件夾下創(chuàng)建：shell.js和shell.html。兩個文件的代碼如下所示，我們來看看它們是如何工作的。
shell.js define(function (require) { var app = require('durandal/app'), ko = require('knockout'); return { name: ko.observable(), sayHello: function() { app.showMessage('Hello ' + this.name() + '! Nice to meet you.', 'Greetings'); } }; }); shell.html <section> <h2>Hello! What is your name?</h2> <form class="form-inline"> <fieldset> <label>Name</label> <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'"/> <button type="submit" class="btn" data-bind="click: sayHello, enable: name">Click Me</button> </fieldset> </form> </section>首先看看shell.js，正如我們之前講到的，它定義了一個模塊。同時它還依賴兩個別的模塊：app和knockout。從代碼可以看出，模塊返回了一個對象。這個對象有一個name屬性和一個sayHello方法。屬性name看起來有點特別，它是我們使用Knockout創(chuàng)建的一個可被觀察的(observable)屬性?？杀挥^察的（observable）屬性支持數(shù)據(jù)到html的雙向綁定，變更通知和一些其它特性。注意看sayHello中調(diào)用了app模塊的方法來顯示一個包含name屬性值的消息對話框。
要完全理解這些代碼，你應該將它與HTML代碼放到一起來看。注意觀察HTML中的data-bind屬性。該屬性將HTML與模塊中的屬性和方法聯(lián)系起來。例如input標簽通過data-bind屬性將它的值與name屬性連接起來的。它同時還指定，當key down事件發(fā)生時，屬性name的值將被更新（如果不指定事件，則默認光標離開時會進行更新）。同樣地，按鈕的click事件綁定了sayHello方法，而且僅當name屬性的值為真時，按鈕才是有效狀態(tài)。看起來是不是很酷？現(xiàn)在就把應用運行起來，你可以用Firefox打開index.html，或者如果你使用其他瀏覽器的話，可以部署到Web服務器下然后瀏覽index.html。當頁面打開時，會經(jīng)歷以下這些步驟：
當頁面加載完成后，在輸入框中試著輸入一些內(nèi)容，觀察按鈕的有效性是如何變化的，然后點擊按鈕看看發(fā)生了什么。
上面的例子看起來不錯，但大多數(shù)應用都不只有一頁。所以，我們開始下一步，將它擴展成具有頁面導航的應用。首先，把shell.js改名為home.js，shell.html改名為home.html。然后創(chuàng)建兩個新文件shell.js和home.js用于導航。以下是兩個新文件的代碼：
shell.js define(function (require) { var router = require('plugins/router'); return { router: router, activate: function () { router.map([ { route: '', title:'Home', moduleId: 'home', nav: true } ]).buildNavigationModel(); return router.activate(); } }; }); shell.html <div> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <ul class="nav" data-bind="foreach: router.navigationModel"> <li data-bind="css: { active: isActive }"> <a data-bind="attr: { href: hash }, html: title"></a> </li> </ul> <div class="loader pull-right" data-bind="css: { active: router.isNavigating }"> <i class="icon-spinner icon-2x icon-spin"></i> </div> </div> </div> <div class="container-fluid page-host" data-bind="router: { transition:'entrance' }"></div> </div>可以看到，shell.js仍然是模塊的標準定義方式。首先require了一個router插件，利用它創(chuàng)建對象。我們配置了一個route指向home模塊。router配置中指定了每個route匹配的模式、顯示的標題、對應加載的moduleId，以及route匹配時，是否應該將此route顯示到導航欄中（nav:true）。配置完成后，調(diào)用buildNavigationModel。該方法利用route信息，構(gòu)建一個特殊的集合，這個集合通過數(shù)據(jù)綁定，可以用來顯示頁面頂部的導航欄。最后，我們激活這個router。所有這些都發(fā)生在activate方法中。每次Durandal向屏幕展現(xiàn)一個組件時，它都會查找可選的activate回調(diào)方法。如果找到，就會在數(shù)據(jù)綁定前調(diào)用此方法。因此這種方式允許你執(zhí)行自定義的激活代碼，例如上面的例子在activate方法中配置應用程序的router。
如果把模塊和視圖的代碼放到一起，這次你應該很容易理解它們是如何工作的了。首先綁定navigationModel屬性，生成一個導航欄navbar。每一個可導航的route被轉(zhuǎn)換成一個li標簽，其中包含一個鏈接。鏈接的標題對應title，地址對應hash。同時，在navbar中還包含了一個spinner動畫圖標，并將其與router.isNavigating屬性進行綁定。當應用從一個頁面導航到另一頁面時，我們就能看到一個spinner動畫圖標。
在html文件的最下方有一個特殊的router綁定，也就是連接模塊中的router。它扮演占位符的角色，用于顯示當前頁面。屬性transition表示當頁面發(fā)生變化時，Durandal要使用“entrance”過渡動畫。
現(xiàn)在將它運行起來。它看起來跟之前差不多，除了在頂端多了個導航欄。因為現(xiàn)在仍然只有一個頁面，因此沒有什么令人印象深刻的東西。我們開始創(chuàng)建第二個頁面，以便能夠在頁面間前進或后退。
我們創(chuàng)建的第二個頁面將調(diào)用Flickr，獲取一組雷尼爾峰的照片并進行展示。首先修改shell的router配置，增加另一個route，這樣它就有了兩個route：
{ route:'', title:'Home', moduleId:'home', nav:true }, { route:'rainier', title:'Mount Rainier', moduleId:'rainier', nav:true }第一個是我們之前的home route，第二個是新的route用于即將創(chuàng)建的新頁面。這時候，希望你已經(jīng)知道應該怎么做了。我們?yōu)樾马撁鎰?chuàng)建一個模塊（module）和一個視圖（view）。
rainier.js define(function (require) { var http = require('plugins/http'), ko = require('knockout'); var url = 'http://api.flickr.com/services/feeds/photos_public.gne'; var qs = { tags: 'mount ranier', tagmode: 'any', format: 'json' }; return { images: ko.observableArray([]), activate: function () { var that = this; if (this.images().length > 0) { return; } return http.jsonp(url, qs, 'jsoncallback').then(function(response) { that.images(response.items); }); } }; }); rainier.html <section> <h2>Mount Rainier</h2> <div class="row-fluid"> <ul class="thumbnails" data-bind="foreach: images"> <li> <img style="width: 260px; height: 180px;" data-bind="attr: { src: media.m }"/> </li> </ul> </div> </section>我想你已經(jīng)能夠看出來它是怎么工作的了。新模塊在activate回調(diào)方法中使用http插件調(diào)用Flickr的api去獲取圖片。然后將數(shù)據(jù)保存到images屬性中。Images是一個可被觀察的（observable）數(shù)組，頁面綁定這個數(shù)組并展示圖片。
將應用運行起來，可以看到在導航欄中出現(xiàn)了兩項，你能在兩者間進行前進和后退操作。你也可以使用瀏覽器的返回按鈕。Durandal能做的事情遠不止這些。也許你該下載Starter Kit并仔細研究，就會發(fā)現(xiàn)一些更有趣的東西。又或者你應該將官方的示例程序下載下來，看看各種功能是如何工作的，例如發(fā)布/訂閱消息、自定義模態(tài)對話框、組件、高級的視圖組合等等。如果你想看一些更酷的東西，可以看看Kickstarter資助的系列培訓中我們將構(gòu)建的應用。
Durandal通過模塊化的方法，使得構(gòu)建富客戶端，動態(tài)的JavaScript應用更加簡單。因此理所當然地，我們的社區(qū)發(fā)展得非?？臁Ｎ覀兊挠媱澆艅倓傞_始，希望你也能加入我們的奇妙旅程。請瀏覽一下我們的Kickstarter。2014年我們已經(jīng)有了一些很酷的目標，同時，也有一些非常棒的獎勵給你。Web正在發(fā)生改變，光明的未來指日可待，希望我們在那里相逢。
