Storing BackboneViews In Elements

How to store Backbone views in element data using the jQuery data() function.

by Adam Boduch

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

JavaScript

// Sample collection
var users = new Backbone.Collection([
    { name: 'User1', age: 23 },
    { name: 'User2', age: 25 },
    { name: 'User3', age: 27 }    
]);

// The main view, renders a list of user links,
// and stores a reference to the view using data().
var MainView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function() {
        this.$el.appendTo(
            $( 'body' ).data( 'view', this ) );
    },
    render: function() {
        users.each( function( user ) {
            $( '<a/>' ).text( user.get( 'name' ) )
                .attr( 'href', '#user/' + user.cid )
                .appendTo( this.$el )
                .wrap( '<li/>' );
        }, this );
    }
});

// The user view, renders the user details, and
// stores a reference to the view using data().
var UserView = Backbone.View.extend({
    initialize: function() {
        this.$el.appendTo(
            $( 'body' ).data( 'view', this ) );
    },
    render: function() {
        $( '<p/>' ).text( 'Name: ' + 
            this.model.get( 'name' ) )
            .appendTo( this.$el );
        $( '<p/>' ).text( 'Age: ' +
            this.model.get( 'age' ) )
            .appendTo( this.$el );
    }
});

// The app router
var app = new (Backbone.Router.extend({
    
    routes: {
        'user/:id': 'routeUser',
        '*default': 'routeDefault'
    },
    
    // Renders the user view, without storing a reference
    routeUser: function( id ) {
        this.cleanup();
        new UserView({
            model: users.get( id )
        }).render();
    },
    
    // Renders the main view, without storing a reference
    routeDefault: function() {
        this.cleanup();
        new MainView().render();
    },
    
    // Finds the current view, 
    cleanup: function() {
        var view = $( 'body' ).data( 'view' );
        if ( view ) {
            view.remove();    
        }
    }
    
}))();

Backbone.history.start();