DOCSEARCHbyAlgolia
Submit Docs

Durandal Documentation

website·Indexed 30 days ago

https://q-durandal.netlify.app

Documentation for Durandal, a framework for building single-page applications using AMD modules. Covers versions 1.2.x and 2.2.0, including guides on composition, activators, view creation, and plugins for routing, HTTP, and observables. Includes instructions for optimizing with Mimosa, using Almond, and creating desktop apps with Node-Webkit.

Tokens
46.8K
Snippets
243
Records
360
Agent score
74%

What's inside Durandal

  1. Overview of the durandal/binder module

    The durandal/binder module is responsible for joining an object instance with a DOM element tree. It achieves this by applying databinding and invoking specific binding lifecycle callbacks (binding and bindingComplete).

  2. Overview of the Durandal SPA Framework

    Durandal is a small JavaScript framework designed for building Single Page Applications (SPAs). It is built on top of jQuery, Knockout, and RequireJS to provide a familiar development experience. It supports MVC, MVP, and MVVM architectures and provides built-in support for UI composition, modal dialogs, eventing/messaging, widgets, transitions, and routing. It is platform-agnostic and can be deployed to browsers, mobile devices (via PhoneGap), or desktops (via AppJS), and works with any backend technology (e.g., .NET, NodeJS Express, or 3rd party APIs).

  3. Overview of the Durandal Framework

    Durandal is a small JavaScript framework designed for building Single Page Applications (SPAs). It is built on top of jQuery, Knockout, and RequireJS, providing a thin layer of conventions to support MVC, MVP, and MVVM architectures. It is designed to be platform-agnostic, allowing deployment to web browsers, mobile devices (via PhoneGap), or desktop environments (via Node-Webkit).

  4. Durandal Framework Architecture Overview

    Durandal is a Single Page Application (SPA) framework that acts as a thin integration layer combining three mature libraries: jQuery (DOM manipulation), RequireJS (AMD JavaScript modules), and Knockout (two-way data-binding). Beyond integrating these libraries, Durandal provides built-in functionality including a client-side router, view composition, screen state management, pub/sub messaging, and modals/message boxes.

  5. Install Durandal optional navigation and transition packages

    Depending on your application requirements, you can install additional Durandal packages via NuGet:

    • Durandal.Router: Provides a navigation-style app architecture based on SammyJS.
    • Durandal.Transitions: Provides prefab composition transitions.
    Install-Package Durandal.Router
Install-Package Durandal.Transitions

  6. Manage data services and backend integration in Durandal

    Durandal is agnostic regarding service technology and backend architecture. Developers can use any technique to handle data, including:

    • Standard jQuery AJAX helpers for querying JSON services.
    • The Durandal http plugin (a wrapper for jQuery functionality) combined with the serializer plugin.
    • Third-party data libraries such as BreezeJS or JayData.
    • Custom-built data service implementations.

  7. Understand the Durandal Activator lifecycle

    The activator module manages screen/component activation as an asynchronous state machine. It enforces a strict transition protocol to ensure stability during state changes. The sequence of events is:

    1. canDeactivate (previous state)
    2. canActivate (new state)
    3. deactivate (previous state)
    4. activate (new state)

    If any can callback returns false (or a promise resolving to false), the activation process halts immediately.

  8. Initialize and start a Durandal application

    The durandal/app module manages the application lifecycle, including startup, plugin configuration, and the root visual display. It extends EventSupport.

  9. Understand the Durandal composition system

    Durandal extends Knockout's data-binding with a composition system. The compose binding allows the DOM to dynamically re-compose based on a module instance (typically the router's activeItem observable).

    The composition process follows these steps:

    1. A route is triggered, and the router sets the corresponding module as the activeItem.
    2. The compose binding detects the change and uses the viewLocator to find the associated view.
    3. The activeItem (view model) and the located view are data-bound together.
    4. The bound view is inserted into the DOM at the compose binding location.
    5. If an animation is specified in the compose binding, it is applied during the transition.

  10. Create and host Durandal code snippets using dFiddle

    dFiddle is a stripped-down version of Durandal hosted on GitHub that allows developers to quickly create live 'fiddles' for sharing and testing modular Durandal applications. Because Durandal encourages breaking apps into small modules, dFiddle provides a better alternative to JSFiddle by supporting multiple files via GitHub Pages.

  11. Enable Globalization and Localization in Durandal

    Durandal's pluggable architecture allows localization solutions to be integrated directly into the binder. This enables centralized localization logic to ensure all on-screen text is properly localized across the application.

  12. Manage application navigation with Durandal Router

    The Durandal router supports both simple route-to-module mappings and convention-based routing. It provides built-in handling for invalid routes and supports both hash-based and pushState navigation. Key capabilities include support for data-driven routes using parameters, optional parameters, splats, and query strings. For complex applications, 'child routers' can be used to encapsulate specific areas of the app and reduce navigation complexity.