Add User Interface JavaScript

User interface JavaScript (or UI script) is the functionality that you add to a transformed page.

User interface (UI) JavaScript includes:

This contrasts with the adaptation JavaScript which transforms the desktop HTML into the mobile HTML.

Find user interface JavaScript files for pages in your project within each folder inside app/pages/.

A. How to Add JavaScript in a Template

Each template has a corresponding user interface JavaScript file.

For example, app/pages/home/ui.js only runs on the home template. Notice that the main function in this file returns the homeUI function. The returned function includes the functionality for the home template.

Now, in the app/pages/home/template.dust Dust.js file, notice the call to the homeUI function. With Adaptive.js, templates automatically correspond to their respective user interface JavaScript files.

Add the JavaScript functionality to the view script file (app/pages/home/ui.js in this example) instead of to the template file itself.

Here's an example of a homeUI script inside a app/pages/home/ui.js file:

define(['$'], function($) {
  var homeUI = function() {
    // Add any logic to run on the home page only here
    console.log('Hello World');

    return homeUI;

Once you finish the UI script, to ensure it compiles properly, add a reference to the UI script file in your app/ui.js file.

// Scripts required in via this file will be combined into ui.js

        // Add additional UI scripts here
    ) {


B. How to Use Template Partials in User Interface JavaScript

Use a Dust.js template partial to generate HTML in your UI JavaScript. This way, you define the HTML structure for a part of the page. Then you populate parts of the page dynamically.

For example:

define(['dust!templates/partials/_slider'], function(slider) {
    // Load the `slider` partial with { foo: 'bar' } as its data
    slider({ foo: 'bar' }, function(err, html) {
        // `html` is the resulting HTML of the partial
        // Inject the HTML into the #slider element

C. Global JavaScript

Use the app/global/ui.js global JavaScript file to add the functionality that is required on every template. Some examples of functionality that occur on every template are:

D. Compilation

You don't need to compile the user interface JavaScript manually - Adaptive.js takes care of that for you automatically.

In the app/global.base.dust Dust.js base file, notice the references to ui.js and ui.min.js in the scripts block.

With Require.js, all of the user interface JavaScript files are compiled into ui.js (in development), or ui.min.js (in production).

Require.js Read more about RequireJS on the official RequireJS site at

Edit in GitHub