Menu

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 the user interface JavaScript files in the assets/js/ui/view-scripts folder.

A. How to Add JavaScript in a Template

Each template has a corresponding user interface JavaScript file.

For example, assets/js/ui/view-scripts/home.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 adaptation/templates/home.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 (home.js in this example) instead of to the template file itself.

Here's an example of a homeUI script inside a assets/js/ui/view-scripts/home.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 assets/js/ui/main.js file.

// Scripts required in via this file will be combined into ui.js
require(
    [
        'view-scripts/global',
        'view-scripts/home'

        // Add additional UI scripts here
    ],
    function(
        globalUI,

        home
    ) {
        globalUI();
    },
    null,
    // ForceSync makes sure all templates have loaded before page scripts are
    // invoked
    true
);

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
        $('#slider').html(html);
    });
});

C. Global JavaScript

Use the assets/js/ui/view-scripts/global.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 adaptation/templates/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 http://requirejs.org/

Edit in GitHub