CODEWITHSUNDEEP
backbone.js
user1540964
user1540964

Reputation: 1

Backbone.js page layouts & having model collection available globally

I'm working on a simple Backbone.js app for practice - a people quote database. (Person has many Quotes and Comments)

Questions

  1. I would like to have two layouts.

    One is a standard two column layout, with one column as a sidebar and the other as the content area. (I would like to embed the view into that column, and keep the sidebar static.)

    The other would be a simple one-column layout for authentication purposes (I want to add authentication as well, since this is a practice project). A simple page with a login form. Obviously, this layout would only be used for one view.

    How can I do this? Is there a plug-in that will make this possible/easy? (Essentially, is there an equivalent to the Rails layout system?)

  2. On that sidebar, I would like to have a list of Person model objects, so a list of all Person objects must be available on each page. In Rails, I would accomplish this with a simple before_filter in the ApplicationController.

    What is the best way to accomplish this?

Upvotes: 0

Views: 252

Answers (1)

Khallil Mangalji
Khallil Mangalji

Reputation: 481

  1. I worked on a project which also required a similar layout structure. We had a rails app with two backbone instances on the frontend. To get our layout we used jQuery-UI-Layout. This will allow you to create multiple 'panels' which represent your sidebar and column. Then you can simply render your views into each panel, and they will be very nicely separated.

  2. when you create your quotes and comments views, you can pass them the people collection so they have access to the person model objects.

so...

Say you have a 'main_view', this main view will initialize your jQuery ui layout.

$(this.el).layout({options})

where options will set the sizing on your Quotes and Comments panels. Then you create your views and pass them the 'people' collection, which is a collection of your 'person' models.

new App.Views.QuotePanelView({
  el: $(this.el).find('#quote_panel'),
  collection: people
})

Here people is a collection of people. And the same goes for the comments panel.

var people = new People([
  {"name" : "James Cameron"},
  {"name" : "Bat Man"},
  {"name" : "Cool Guy"}
]);

Upvotes: 1

Related Questions