Menu

Using JavaScript from the Desktop Site

Re-use dynamic content, form validation or tracking code from your desktop site in your Adaptive.js site.

Adaptive.js views can select <script> elements from your desktop site to render in templates. The default Adaptive.js project scaffold includes JavaScript from the desktop site.

The default base view, app/global/baseView.js, uses the Descript plugin to manage <script> elements:

// app/global/baseView.js

preProcess: function(context) {
    // Detach `<script>` elements from the desktop DOM and put
    // them in the "default" container maintaining DOM ordering.
    descript = Descript.init();
    return context;
},

context: {
    // Set `desktopScripts` context key to the "default" container.
    desktopScripts: function() {
        return descript.get("default");
    }
}

The default base template, app/global/base.dust, renders the desktopScripts context key:

{! app/global/base.dust !}

{+scripts}
    {desktopScripts}
{/scripts}

Placing desktopScripts at the end of the base template minimizes the impact of synchronous JavaScript on page rendering performance.

Customizing Desktop JavaScript

Descript allows you to chabnge desktop JavaScript by:

To do this, you can use use Descript to put your desktop <script> element into different containers:

// app/global/baseView.js

preProcess: function(context) {
    // Put `<script>` elements into the "default" container.
    descript = Descript.init();

    // Create a container, "urgent", for `<script>` elements whose
    // `src` includes "jquery.js". Script elements may only be in
    // one conatiner so matching scripts are removed from the
    // "default" container.
    descript.add('urgent', {src: ['jquery.js']});

    return context;
},

context: {
    // Set `desktopScripts` context key to the "default" container.
    desktopScripts: function() {
        return descript.get("default");
    },

    // Set `urgentScripts` context key to the "urgent" container.
    urgentScripts: function() {
        return descript.get("urgent");
    }
}

Render the <script> elements using the context key they were assigned to in a template:

{! app/global/base.dust !}

{+scripts}
    {! Render `urgentScripts` container first: !}
    {urgentScripts}
    {desktopScripts}
{/scripts}
Edit in GitHub