Ember - Page not getting displayed

Question

I am trying my first ember application. It has two pages. One is the Welcome page and the other page lists student details. so I have created two routes namely index and studentdb. The problem is my second page is not getting displayed. I have used Mirage as I am following ember guides. The code is as below:

templates/index.hbs

<h1> Welcome </h1>

{{#link-to "studentdb"}}List{{/link-to}}

{{outlet}}

templates/studentdb.hbs

<h2> Welcome to Student Database </h2>
<h4> Following are the details </h4>

{{#each model as |student|}}
  <p>Name: {{student.Name}}</p>
  <p>College: {{student.College}}</p>
  <p>Department: {{student.Department}}</p>
{{/each}}

{{outlet}}

routes/studentdb.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {
        return this.store.findAll('student');
    }
});

models/student.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  Name: DS.attr(),
  College: DS.attr(),
  Department: DS.attr()
});

mirage/config.js

export default function() {

  this.get('/student', function() {
    return {
      data: [{
        type: 'student',
        id: 1,
        attributes: {
          Name: 'Archana',
          College: 'MNM Jain',
          Department: 'CSE'

        }
      }, {
        type: 'student',
        id: 2,
        attributes: {
          Name: 'Monica',
          College: 'Sathyabama',
          Department: 'IT'
        }
      }, {
        type: 'student',
        id: 3,
        attributes: {
          Name: 'Manoj',
          College: 'Kumarsaamy',
          Department: 'MECH'
        }
      }]
    }
  });


}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('studentdb');
});

export default Router;

Kindly someone help. Thanks in advance.

This the error I get after re-installing ember as given in the below instructions https://github.com/ember-cli/ember-cli/releases

npm WARN deprecated [email protected]: This package is no longer maintained. See its readme for upgrade details. npm ERR! registry error parsing json npm ERR! registry error parsing json npm ERR! registry error parsing json npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "[email protected]"npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! http://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request: npm ERR! C:\Users\learner\npm-debug.lo

Kindly help please.

try specifying path this.route('studentdb', { path: 'studentdb' }); — Bek
I tried but still getting a blank page.. I removed all the contents in studentdb.hbs and also studentdb.js gave just a welcome message in studentdb.hbs, it is working fine. So the problem is with the model. — Learner

Bek Bek · Accepted Answer · 2016-01-05T12:22:27

you need to define your route this.get('/students', it uses ember-inflector internally to pluralize your urls this is according to jsonapi.org

Ember - Page not getting displayed

2 Answers