Question

I apologize for being new with backbone but I think I get the concepts.

For example: you have models for a Bookstore > Bookshelf > Book > Page

How would you organize this so the views can be controlled like this:

Bookstore.render() //to view the bookstore
Bookstore.bookshelf.get(shelfId).render() //to view shelf
Bookstore.bookshelf.get(shelfId).book.get(bookId).render() //to view book
Bookstore.bookshelf.get(shelfId).books.get(bookId).pages.at(0).render() //to view page

Is this the correct way to do it?

Answer 1

Yes It’s possible and I created for you a working example, I think It’s just an other method to organize your Backbone JS architecture and I think It’s a pretty good idea.

Explications

All the models must have :

• a render method which call the render method of its view. I create a base model that I extend for the Bookshelf, Book and Page model.

• a initialize method, It create the collection (books for bookshelves, pages for book…)

Finally I instanced the Bookstore model and It’s done !

Code

The demonstration : http://jsfiddle.net/Atinux/DvbA3/show/

Try in the console :

Bookstore.render()
Bookstore.bookshelves.get(1).render()
Bookstore.bookshelves.get(1).books.get(2).render()
Bookstore.bookshelves.get(1).books.get(2).pages.at(0).render()

The code with comments is available here : http://jsfiddle.net/Atinux/DvbA3/

I think the best thing is to understand how the code work. Feel free to ask me if you have problems to understand perfectly my code.

The JSON data

The JSON data have to look like :

var data = {
    bookshelves: [{
        id: 1,
        name: 'Science',
        books: [{
            id: 1,
            name: 'Abstract Algebra',
            pages: [
                { content: 'Page 1 Abstract'},
                { content: 'Page 2 Abstract'},
                { content: 'Page 3 Abstract'}
            ]
            }, {
                    id: 2,
                    name: 'Chemistry and Technology of Fertilizers',
                    pages: [
                { content: 'Chemistry page 1' },
                { content: 'Chemistry page 2' },
                { content: 'Chemistry page 3' }
            ]
          }
        ]
      }, {
        id: 2,
        name: 'Psychology',
        books: [{
            id: 1,
            name: 'How to Think Straight About Psychology',
            pages: [
                { content: 'Psychology page 1' },
                { content: 'Psychology page 2' },
            ]
          }
        ]
      }
    ]
};