Ember.js Building Page on Refresh

Question

I just recently began learning how to use Ember.js for a project my company is about to start. The problem that I'm having is that when I refresh the page, the app is not automatically building the page for me.

It's working on most pages, but I have a single page right now that has a variable in the URL which is failing. This seems as if it would be a common problem, but I cannot find an answer to this question.

Here is my code:

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

// Router Map
App.Router.map(function() {
    this.resource("people", function() {
        this.route('information');
    });
    this.resource("view", {path: '/view/:user_id'}, function() {

    });
});

App.ViewRoute = Ember.Route.extend({
    model: function(params) {
        return App.Students.find(params.user_id);
    }
});

App.PeopleRoute = Ember.Route.extend({
    setupController: function(controller, model){
        this._super(controller, model);

        controller.set('students', this.store.find('Students'));
    }
});

App.PeopleInformationRoute = Ember.Route.extend({
    setupController: function(controller, model){
        this._super(controller, model);

        controller.set('students', this.store.find('Students'));
    }
});

And here is my HTML:

<script type="text/x-handlebars">
    <h1>Ember Testing Demo</h1>

    {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
    <h2>Index</h2>

    {{#linkTo "people"}}People{{/linkTo}}
</script>

<script type="text/x-handlebars" id="view">
    <h4>Student Data</h4>
    <p>{{first}} {{last}}</p>

    Edit First Name: {{input type="text" value=first}}<br />
    Edit Last Name: {{input type="text" value=last}}<br /><br />

    {{#linkTo "people"}}Done{{/linkTo}}
</script>

<script type="text/x-handlebars" id="people">
    <h2>People</h3>

    <ul>
        {{#each students}}
            {{#linkTo "view" this}}<li>{{first}} {{last}}</li>{{/linkTo}}
        {{/each}}
    </ul>

    {{outlet}}
</script>

<script type="text/x-handlebars" id="people/index">
    <h3>No Student Selected</h3>
</script>

<script type="text/x-handlebars" id="people/information">
    <h3>Student Information</h3>
</script>

I understand that I have a whole lot of nothing going on. I'm just doing some things to better understand the way routes and outlets are working at the moment. There is no practical use to this whatsoever.

The problem is occurring with the "view" resource that I have in my router. It's not able to build the page from "/view/11", or any other User ID in the URL. It doesn't give me an error; instead, I get a blank page. If I try to go to plain "/view", I do get an error, however.

Let me know if I left anything out.

EDIT:

Here are the fixtures that I'm using:

App.ClassGroup = DS.Model.extend({
    className: DS.attr('string'),
    isActive: DS.attr('number'),
    students: DS.hasMany('Students',{async:true}),
    selected: DS.hasMany('Students',{async:true})
});

App.ClassGroup.FIXTURES = [
    {
        id: 123,
        className: 'Class 1',
        isActive: 1,
        students: [11, 22, 33, 44, 55],
        selected: [11, 22, 33, 44, 55]
    },
    {
        id: 456,
        className: 'Class 2',
        isActive: 0,
        students: [66, 77, 88, 99],
        selected: [66, 88, 99]
    },
    {
        id: 789,
        className: 'Group 1',
        isActive: 0,
        students: [77, 22],
        selected: []
    }
];

App.Students = DS.Model.extend({
    first: DS.attr('string'),
    last: DS.attr('string'),
    classes: DS.hasMany('ClassGroup')
});

App.Students.FIXTURES = [
    {
        id: 11,
        first: 'Student',
        last: 'One',
        classes: [123]
    },
    {
        id: 22,
        first: 'Student',
        last: 'Two',
        classes: [123, 789]
    },
    {
        id: 33,
        first: 'Student',
        last: 'Three',
        classes: [123]
    },
    {
        id: 44,
        first: 'Student',
        last: 'Four',
        classes: [123]
    },
    {
        id: 55,
        first: 'Student',
        last: 'Five',
        classes: [123]
    },
    {
        id: 66,
        first: 'Student',
        last: 'Six',
        classes: [456]
    },
    {
        id: 77,
        first: 'Student',
        last: 'Seven',
        classes: [456, 789]
    },
    {
        id: 88,
        first: 'Student',
        last: 'Eight',
        classes: [456]
    },
    {
        id: 99,
        first: 'Student',
        last: 'Nine',
        classes: [456]
    }
];

Answer 1

What version of Ember are you using? Because you are using the pre-1.0 syntax for accessing models in Ember Data (see https://github.com/emberjs/data/blob/master/TRANSITION.md). Try

App.ViewRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('student', params.user_id);
    }
});

Also, the definition of your Students model should be singular. After all, you're defining the class of a single student. So

App.Student = DS.Model.extend({
    first: DS.attr('string'),
    last: DS.attr('string'),
    classes: DS.hasMany('ClassGroup')
});

Not sure if this will fix the problem though!