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

Question

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

I have a two-dimensional grid of pages (for example, map fragments), and I would like to display and navigate through them. I use the highway in other sections of the site and think that this will help too?

Example: (image below)

User on Page1. They click on the link on the right side of the page. I load this page from my web server into a new element, which is out of the field of view on the right, and “insert” it into place.

(My ultimate goal is to load all the surrounding pages in the background so that when the user clicks, the transition occurs immediately. Therefore, I wanted to save it in some configuration of the Backbone model)

(I know that there are many slide presentation libraries, but that’s not what I'm trying to achieve, so I need something that I can set up from scratch)

Thanks :)

Answer 1

Demonstration

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

It has no enhancements like pre-rendering images ...

explication

It's pretty simple, I just have one collection and one view .

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

The view anchors the arrows, and then the user clicks on it:

• I am changing the actual coordinates

• I get the model in the collection with new coordinates

• I am changing the actual background using a transition.

Data

Model data is an array of hashes:

 [ { 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 submission:

 <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> 

Type of grid:

 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 the actual display of the model in the grid using gridView.model , because we define this.model when the coordinates change.

Whole code

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