Durandal Quick Start

Durandal is a lightweight JavaScript framework with the goal of simple and elegant development of a single page application (SPAs). It supports schemas such as MVC, MVP, and MVVM, so durandal is competent regardless of the type of front-end architecture you use.

Durandal is based on Requirejs, plus a lightweight convention layer that brings amazing productivity and helps you maintain robust coding practices. With the out-of-the-box rich interface components, modal dialogs, events/messages, components, transition effects, navigation and so on, so you can easily develop any you can imagine the application.

Although Durandal is only released for about a year, its community is growing at a rapid pace.

Therefore, we have launched a Kickstarter to help us accomplish some magical things in 2014, and hope you will pay attention to it. But now, I'm going to show you how to develop a simple Durandal program.

There are a number of ways to start using Durandal, depending on your platform. Because Durandal is a pure JavaScript library, independent of any server-side platform, we try to package it in a variety of ways to meet a variety of web developers. In this tutorial, we will use the HTML Starter Kit directly. You can download it directly on the official website.

After downloading the HTML Starter kit, unzip, you can open the index.html page directly in each version of Firefox and run its sample program. Or you can deploy it to a Web server and browse its index page.

This column more highlights: http://www.bianceng.cn/webkf/tools/

Starter Kit demonstrates a basic navigation architecture, including navigation, page history, data binding, modal dialog boxes, and more. Of course, we don't just look at it, we're going to start writing a little program from scratch. First open the App folder, delete everything inside, and then delete the index.html. This allows us to have an empty project and preconfigured all the necessary scripts and CSS.

* Note: IE, Chrome and Safari You may not be able to open this type of file directly from the file system. If you still want to use these browsers, you can deploy them to your favorite Web server.

index.html We started writing the index.html file, which reads as follows:

<! DOCTYPE html> 
 
We see that there are only a few CSS style files in the file, a simple center with ID applicationhost, and a script tag. We add bootstrap and fontawesome to make the interface look nice, but they're not necessarily durandal. The key code we want to focus on is the script tag.
 
Durandal adopts Requirejs as one of its core components to encourage the modular programming method. In the Durandal application, all the JS code is written in the module. The script tag in index.html above is a modular strategy for loading REQUIREJS to complete the framework. When the module loader completes initialization, it starts the application by Data-main The value of the property. Like the main function in C, theData-main attribute points to the main module, which is the entrance to the entire application. Let's take the next step and create this module. First create a file named Main.js , and put it under the app folder. The code is as follows:
 
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 ');});