Barefoot.View

The barefoot view extends the default backbone view by applying an environment specific mixin to it.

For further information, please refer to the regarding environment specific mixins.

Environment Specific Mixins

• Barefoot.View.Client
• Barefoot.View.Server

Example View Implementation

var MainView = Barefoot.View.extend({
    el: 'body'
    , initialize: function() {
        this.addSubview(new NavigationView());
    }
    , template: '<header><h1>Application</h1><nav></nav></header>'
              + '<section id="main"></section>';
    , renderView: function() {
        this.$el.html(this.template);
    }
    , events: {
        'click h1': 'onClickTitle'
    }
    , onClickTitle: function onClickTitle(e) {
        console.log('Yay! Title clicked.')
    }
});

The following sections discuss specific aspects / differences of this code snippet in comparison to a common Backbone application.

Where’s the render() function?

Working with Barefoot.View, you should never implement a render function.  Instead, do everything you’d do there inside of the renderView function.  Barefoot overwrites backbones render() with its own version (see <Barefoot.View.Shared.render>) to accomplish hassle free view rendering, both on client and server.

Subviews/Nested Views

You may be used to create the subviews of your views directly in the render function and call their render function there.

Barefoot supports you by providing the addSubview and removeSubview functions.  Use these functions inside the initialization function of your view.  Managing subviews this way brings a few improvements:

• Barefoot can render views on its own on the server and the browser client
• You do not take care of destroying your view hierarchy when rendering a new view.  Barefoot will handle this for you.  (No more Zombies)

beforeRender and afterRender hooks

Barefoot looks for a beforeRender or afterRender function and executes them before / after rendering your view automatically.

If beforeRender or afterRender is invoked, a “resolve” and “rejected” argument is passed to them.  These two functions are essential when using asynchronous calls which prepare the view for rendering or doing async cleanup work.

Lets say you use the beforeRender hook to load some data from your APIAdapter into Models.  Since calls to the APIAdapter are async, you have to ensure that beforeRender does not finish until the api call is done and your data in place.  The following example shows such a beforeRender implementation:

function beforeRender(resolve, reject) {
    contactsCollection.fetch({
        success: function() {
            resolve();
        }
    });
    console.log('Loading contacts from API...');
}

This function will not “terminate” as soon as the console.log statement was executed.  Barefoot will wait until you explicitly call the “resolve” function argument (or reject in case something went wrong).

These technique is widely known as “Promises”.  Barefoot uses the popular implementation Q implementation of the Promises/A+ spec.

Attention

Please be aware you are not overwriting the renderSubviews and render method.  This would break the rendering mechanisms of Barefoot on the server and client.