CODEWITHSUNDEEP
ember.jsember-app-kit
Artzt
Artzt

Reputation: 51

Ember app kit and resource routes

Am attempting to define nested resource within ember app kit. Is my file structure incorrect? When I add the nested resource, I get the following exception:

Error: Assertion Failed: The URL '/pages.index' did not match any routes in your application

By simply commenting out the function defining the nested "page" resource, the app loads correctly and displays the pages template.

Router code:

var Router = Ember.Router.extend(); 

Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
  this.resource('pages', {path: '/pages'}
      // if this line is commented out, no error (index route is not called though)
      , function() { this.resource('page', {path: ':page_id'}); }
    );
});

export default Router;

File structure is thus:

$ ls -R
component-test.js   helper-test.js      pages
component_test.js   index.js        pages.js

./pages:
index.js    page.js

Pages route:

export default Ember.Route.extend({

  model: function() {
    return [{title: "One", _id: "one"}, {title: "Two", _id: "two"}];
    //this.store.find('page');
  }

});

pages/index route:

export default Ember.Route.extend({
  model: function() {
    return this.modelFor('page');
  }
});

The es6 generated module for the pages/index route looks like this:

define("appkit/routes/pages/index", 
  ["exports"],
  function(__exports__) {
    "use strict";
    __exports__["default"] = Ember.Route.extend({
      model: function() {
        return this.modelFor('page');
      }
    });
  });

Upvotes: 3

Views: 675

Answers (1)

kiwiupover
kiwiupover

Reputation: 1780

Try this.

Do you have your pages index route named "index.js" in a pages folder?

Ember App Kit looks up files by folder structure. So the pages index route should be found at "app/routes/pages/index.js".

Here is a repo with this code https://github.com/kiwiupover/for_eric

The Router

var Router = Ember.Router.extend(); 

Router.map(function() {
  this.route('component-test');
  this.route('helper-test');
  this.resource('pages', function() {
    this.route('new');
  });
});

export default Router;

The Routes Folder

routes -|        //folder
   pages.js     
   pages -|      // folder
     index.js

The pages route

export default Ember.Route.extend({
  model: function(){
    return [{title: "One", _id: "one"}, {title: "Two", _id: "two"}];
  }
});

The pages index route

export default Ember.Route.extend({
  model: function(){
    return this.modelFor('pages');
  }
});

The Template Folder

templates -|     //folder
   pages.hbs     
   pages -|      // folder
     index.hbs

Pages Template 

<h1>Pages</h1>
<ul>
  {{#each}}
    <li>{{title}}</li>
  {{/each}}
</ul>

{{outlet}}

The Index Template 

<h2>The Index page for Pages</h2>

<ul>
  {{#each}}
    <li>the index page {{title}}</li>
  {{/each}}
</ul>

Upvotes: 4

Related Questions