Menu

Views

A view selects and transforms the content that is displayed on your adapted page.

A. What is a View?

A view is a part of the compiled adaptive.js transformation file. Before compilation, each view is an individual file that you edit.

In a view, you select or transform the content from the original desktop version of a page for the adapted mobile version of the page.

Think of a view as a way to store content from the original page. The page context stores the content.

At a later time, the template calls the content to use it again in the mobile-adapted page.

A view can include partial views (for example, a header and a footer), extend a parent view, or stand on its own.

A view is stored with it's associated page in app/pages/pageTitle/view.js.


B. The Components of a View


a. View.context

In the context section, you define the content to select or to transform from the original page. You can create many keys to store your content.

Here is an example of content selection without modifications directly from the original page:

...

/**
 * Returns an element selected from the page.
 *
 * @param {Object} context
 * @return {Object} page element selection.
 */
hero: function(context) {

    // Returns the element with the hero ID.
    return $('#hero');
}

...

The following is another example, this time of content selection with some transformations from the original page:

...

/**
 * Returns the description with the break tags removed.
 *
 * @param {Object} context
 * @return {Object} transformed page element selection.
 */
description: function(context) {

    // Store the description.
    var $description = $('.description');

    // Find the break tags in the description.
    // Remove the instances of the break tag in the description.
    $description.find('br').remove();

    // Return the modified description.
    return $description;
}

...

b. View.preProcess

The preProcess function runs before the context keys are evaluated.

Use the preProcess function to clean up the markup before the context keys run.

For example:

...

/**
 * Returns the post-processed text with the line breaks removed.
 *
 * @param {Object} context
 * @return {Object} pre-processed product list.
 */
preProcess: function(context) {

    // Run the base view preProcess function if it exists
    if (BaseView.preProcess) {
        context = BaseView.preProcess(context);

        // Remove all the line breaks for mobile.
        $('br').remove();
    }

    // Return the page with the line breaks removed.
    return context;
}

...

c. View.postProcess

The postProcess function runs after the context keys are evaluated.

Use this postProcess function to selectively transform elements after you mark the elements to transform in context.

For example:

...

/**
 * Returns the post-processed text with the line breaks removed.
 *
 * @param {Object} context
 * @return {Object} pre-processed product list.
 */
postProcess: function(context) {

    // Run the base view preProcess function if it exists
    if (BaseView.postProcess) {
        context = BaseView.postProcess(context);

       // Remove all the line breaks for mobile.
        $('br').remove();
    }

    // Return the page with the line breaks removed.
    return context;
}

...

d. View.template

This is the template file that renders the current view after the view finishes loading.

Dust.js By default, we use Dust.js as our templating engine.

An example of how the template associated with the view is defined:

...

define(['$',
        'global/baseView',
        'dust!global/pages/home/template'],
function($, BaseView, template){
    return {
        template: template,

...

Notice how the dust!pages/home/template template is loaded in the dependencies array. The dust! prefix uses the Dust.js plugin to compile the home/template template to render this view.


C. View Inheritance


a. View.includes

A view can include partial views with an includes statement. This is useful when a piece is reused across multiple views, like a header, a footer, or a pagination.

For example:

...

define(['$',
        'global/baseView',
        'includes/_pagination',
        'dust!pages/home/template'],
function($, BaseView, pagination, template){
    return {
        ...
        template: template,
        includes: {
            'pagination': pagination
        }
...

By convention, we add partial views in the includes folder, and prefix the file name with an underscore.


b. View.extend

A view can extend a parent view. In that case, the view inherits all of the parent methods including the preProcess, postProcess, context, and includes method.

If a key is defined in both the parent and child view, the child's key overrides the parent's key.

Most views in Adaptive.js inherit from the baseView.js file. The baseView.js file includes basic content selections and the base.dust base template.

An example of a view extending the base view:

...

define(['$',
        'global/baseView',
        'dust!pages/home/template'],
function($, BaseView, template){
    return {
        template: template,
        extend: BaseView,

...

Go on to Create a New View or learn to Work with External Resources in your view files.

Edit in GitHub