CODEWITHSUNDEEP
javascriptember.jsember-cli
Amadan
Amadan

Reputation: 198294

Trouble with nested resources

I'm new to Ember, and I think I bit off more than I can chew with this practice app, but I intend to learn. I might be completely conceptually off, if so, feel free to offer a better structure for my use case.

My (abbreviated) routing looks more or less like this:

Router.map(function() {
  this.resource('shops', { path: '/' }, function() {
    this.resource('shop', { path: ':shop_id' }, function() {
      this.resource('items', { path: 'admin'}, function() {
      });
    });
  });
});

The intention is that the user will select a shop, then get a list of all possible items with checkboxes where he can decide which are available in that shop and which aren't. So far, I'm just trying to display the list of all items, but it's not working. However, the list of shops - no problem whatsoever.

Both shops and items controllers are identical:

// app/controllers/shops.js
// app/controllers/items.js
export default Ember.ArrayController.extend({});

The routes are nearly identical:

// app/routes/shops/index.js
export default Ember.Route.extend({
  model: function() {
    return this.store.find('shop');
  }
});

// app/routes/items/index.js
export default Ember.Route.extend({
  model: function() {
    return this.store.find('item');
  }
});

The shop controller does not exist, and the shop.index route is trivial:

// app/routes/shop/index.js
export default Ember.Route.extend({});

What gives?

EDIT: JSBin

Upvotes: 0

Views: 77

Answers (2)

Amadan
Amadan

Reputation: 198294

Answered on IRC by one very helpful "locks". Some problems remain, but the big question has been answered with this JSBin. My biggest confusion came from misunderstanding how URLs are handled, and what the role of link-to helper was. What I needed most was the change in the ItemsController:

App.ItemsController = Ember.ArrayController.extend({
  needs: ['shop'],
  shop: Ember.computed.alias('controllers.shop.model')
});

which would make shop accessible, and a mistake in a template saying items instead of model.

Upvotes: 0

locks
locks

Reputation: 6577

The problem with your JSBin turns out to be rather simple. In the simplified router in your original post you have this.resource('items', { path: 'admin'}, function() {});.
Since you pass a function to this.resource that means it has an implicit nested this.route('index').

However, in your JSBin, you have this.resource('items, { path: 'admin' });.
Since you are not passing a function in this case, there is no implicit index route.

The solution is either to add the function bit, or rename App.ItemsIndexRoute to App.ItemsRoute and data-template-name="items/index" to data-template-name="items".

JSBin with the latter: http://emberjs.jsbin.com/dahuge/2/edit?html,js

P.S. I've also prepared a JSBin using just this.route which is currently more future-friendly: http://jsbin.com/mifamu/9/edit?html,js,output

Upvotes: 2

Related Questions