How can I represent a 2d grid of pages using Backbone.js?

Question

I'm rather new to Backbone, so I'm looking for some architecture advice for a new project.

I have a 2d grid of pages (like map tiles), and I'd like to display and navigate through them. I'm using backbone in other areas of the site, and I'm thinking it would help here too?

Example: (Image at the bottom)

A user is on Page1. They click a link on the right of the page. I load that page from my webserver, into a new element out of view on the right, and 'slide' it into place.

(My end aim is to load all surrounding pages in the background, so that when a user clicks the transition is immediate. Hence I wanted to store it in some kind of Backbone model setup)

(I am aware that there are plenty of slide presentation libraries around, but that isn't what I'm trying to achieve, so I need something that I can customise from the ground up)

Thanks :)

Answer 1

Demonstration

I wrote a little demonstration of a 2d grid system with Backbone.JS: http://www.atinux.fr/demos/2d-grid/

It doesn't have improvements like pre-render images...

Explications

It's rather simply, I just have one collection and one view.

Each picture is a model and its coordinates are in the Id (example:{ id: '0x5' }, here x = 0 and y = 5.). All the models are stocked in the collection of the view.

The view bind the arrows, and then the user click on it :

1. I change the actual coordinates

2. I get the model on the collection with the new coordinates

3. I change the actual background with a transition.

Data

The data of the models is an array of hashs:

[
    {
        id: '0x0',
        url: 'assets/images/pics/rice.jpg'
    }, {
        id: '0x1',
        url: 'assets/images/pics/beach.jpg'
    }, {
        id: '1x0',
        url: 'assets/images/pics/cold.jpg'
    }
]

Code

HTML of the view :

<div id="grid">
    <div class="bg-trans"></div>
    <div class="bg"></div>
    <a class="arrow top"></a>
    <a class="arrow left"></a>
    <a class="arrow right"></a>
    <a class="arrow bottom"></a>
</div>

Grid View:

Backbone.View.extend({
    initialize: function () {
        // Coordinates of the actual picture
        this.x = 0;
        this.y = 0;
        // Show actual picture (actual model, position 0x0)
        this.$('.bg, .bg-trans').css('background-image', "url('"+this.model.attributes.url+"')");
        // Display available arrows
        this.showArrows();
    },
    // bind arrows
    events: {
        'click .left': 'moveLeft',
        'click .right': 'moveRight',
        'click .top': 'moveTop',
        'click .bottom': 'moveBottom'
    },
    // Return the actual coordinates by defaults (without parameters)
    coord: function (x, y) {
        x = (x == null ? this.x : x);
        y = (y == null ? this.y : y);
        return x + 'x' + y;
    },
    // Show available arrows
    showArrows: function () {
        // jQuery here, no important for the answer
        // [...]
    },
    // When use click on left arrow
    moveLeft: function () {
        var newCoord = this.coord(this.x - 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.x--;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveRight: function () {
        var newCoord = this.coord(this.x + 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.x++;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveTop: function () {
        console.log(this.y - 1);
        var newCoord = this.coord(null, this.y - 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.y--;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    },
    moveBottom: function () {
        var newCoord = this.coord(null, this.y + 1),
            model = this.collection.get(newCoord);
        if (model) {
            this.y++;
            this.model = model;
            // ANIMATION
            // [...]
            /////////////////////
            this.showArrows();
        }
    }
})

At any time, you can access at the actual model display on the grid with gridView.model because we define this.model when we change the coordinates.

All the code

Of course you can download all the code here (.zip): http://www.atinux.fr/demos/2d-grid.zip