Ember.js nested architecture

Question

First off, I'm still pretty new to Ember.js, but I've been reading books and following tutorials and now I have an application that I would like to make, but I need pointed in the right direction. Let's say I want to make an vehicle designer with a series of drop down boxes, here's some sample vehicles:

• Car
  • Make: BMW
    • Model: 3 Series
      • Color: White, Black, Green, Yellow
      • Engine: 2.0L, 3.0L
      • Interior: Black, Beige, Brown
    • Model: 5 Series
      • Color: White, Black, Green, Yellow
      • Engine: 2.0L, 3.0L, 4.4L
      • Interior: Black
  • Make: Audi
    • Model: A3
      • Color: Black, Red, Gray
      • Engine: 2.0L
      • Interior: Blue, Red, Aqua
• Truck
  • Make: Ford
    • Model: F150
      • Color: Black, Brown, Tan
      • Engine: 3.5L, 3.7L, 5.0L, 6.2L
      • Bed Size: 5 Foot, 7 Foot
    • Model: F250
      • Color: Black, Green, Red
      • Engine: 6.2L, 6.7L
      • Bed Size: 5 Foot, 7 Foot
  • Make: Dodge
    • Model: Ram
      • Color: Blue, Pink, Orange
      • Engine: 6.0L
      • Bed Size: 5 Foot, 6 Foot

Just in this example, their would be 87 different combinations of vehicles, but a full application could have hundreds of thousands of vehicles. Ideally, users could bookmark and share the designs they come up with, so URLs would be nested like:

designer#/truck/ford/f150/tan/3.5l/7

Since a nested architecture approach might be a mess, another possibly would be with query strings (although I know it's still an experimental feature at this time) such as:

designer?type=truck&make=ford&model=f150&color=tan&engine=3.5l&bed-size=7

First off, is Ember.js the right tool for the job? How would I handle the different attributes (eg cars have interior colors, but trucks have bed sizes)? I'm still learning, so any help would be GREATLY appreciated, even if you just point me in the right direction.

Answer 1

Here's a working demo with nested routes.

The routes will look like

App.Router.map(function() {
  this.resource('vehicles', {path: '/:vehicle_type'},function() {
    this.route('vehicle', {path:'/:vehicle_make'});
  });
});

You can render the interior color and bed size based on the availability of the data. This is done via handlebars

{{#if item.interior}}
  <p>Interior: Color {{item.interior}}</p>
{{/if}}
{{#if item.bed_size}}
  <p>Bed Size: {{item.bed_size}}</p>
{{/if}}