We’ve noticed a lot more people using a single page application (SPA) framework called DurandalJS, and as a result we’ve also noted an uptick in inquiries on how to use Wijmo in a Durandal application. This blog post aims to demystify much of the process of getting this to work properly.

A bit of context before we get started

DurandalJS is a framework built on libraries that many of us are already familiar with. These include jQuery for easier DOM manipulation, KnockoutJS for data binding and RequireJS for AMD supported design patterns. There’s some good news there if you’re a Wijmo fan; as you know Wijmo follows the same philosophy, as such, we already support all of these libraries. That means that we can just download the DurandalJS starter kit and get to work.

Digging into the Starter Kit

There are some areas in the starter kit that are worthy of some special consideration, so let’s take a few minutes to step through this slowly since getting a handle on things can really get confusing with the way that asynchronous calls and promises are layered throughout the application.

index.hmtl

Let’s start with "index.html". As you can see below, there really isn’t much in the index outside of some meta data and some css style links in the head, and really very little inside of the body tags. Even though that’s the case, this file holds the key to declaring the entry point to the whole application. index image applicationHost is where all of your application’s views will be loaded. Below that you’ll notice just one script reference on the page with the data-main attribute set to resolve to the "main.js" file at run time. From here on out, it would be very helpful if you already have a basic understanding of the way that RequireJS loads JavaScript files. If you don’t, take a look at their documentation to get a better idea of how the library takes a modular approach in loading scripts.

Main.js

The "main.js" file does a lot of the heavy lifting for the application. You’ll find it inside the “app” folder. It’s responsible for configuring RequireJS to load scripts in a modular fashion. Let’s take a look at the config: main.js config This is why you won’t see many script references in the index – they’ll be loaded as needed by RequireJS. You’ve also probably noticed that all of these scripts are kept locally in the “lib” folder. It is possible to use external scripts, but in this sample, we’re going to keep it all local.

Adding Wijmo to the application

In case you haven’t already done so, download the latest version of Wijmo and unzip it. Inside you’ll find a folder labelled “amd-js” which contains the entire Wijmo library broken up into modules and organized by namespaces. It also contains any interoperability scripts needed to enable Wijmo to work with external libraries as well as our supported external libraries themselves. We’re going to copy it into the “lib” folder inside of our starter kit. Once it’s there, rename it to “wijmo”. Some of the external libraries are now made redundant because they already existed inside this sample app, so you may want to do a little housekeeping.

Configuring RequireJS to load Wijmo

For the sake of simplicity I’m going to make sure that you’re aware that in many cases, one widget will need access to several namespaces to operate properly. With that in mind, I’ve decided to add the ComboBox and the Text Editor to the sample application since they have several dependencies. require config This is one of the most important steps in this process. Take your time here and make sure that you give each widget appropriate access to any namespace that it needs. If you don’t, we’re going to be back here sooner or later when debugging. If you do get hung up here, I’ll be covering some debugging pro-tips in part 2 of this post. In this post, we've familiarized ourselves with the DurandalJS starter kit, and incorporated Wijmo's resources into the application. We've also told RequireJS where to find these resources. In part 2, we'll set up the views and view models and cover any gotchas and troubleshooting steps to ensure your success.