Ember.js 在刷新时构建页面

Question

我最近刚开始学习如何将 Ember.js 用于我公司即将启动的项目。我遇到的问题是，当我刷新页面时，应用程序不会自动为我构建页面。

它适用于大多数页面，但我现在有一个页面，其 URL 中有一个变量失败。这似乎是一个常见问题，但我找不到这个问题的答案。

这是我的代码：

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'));
    }
});

这是我的 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>

我知道我有很多事情没有发生。我只是在做一些事情以更好地了解路线和网点目前的运作方式。这没有任何实际用途。

问题出在我路由器中的“视图”资源上。它无法从“/view/11”或 URL 中的任何其他用户 ID 构建页面。它不会给我一个错误；相反，我得到一个空白页。但是，如果我尝试转到普通的“/view”，我确实会收到错误。

如果我遗漏了什么，请告诉我。

编辑：

这是我正在使用的固定装置：

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

您使用的是什么版本的 Ember？因为您使用 1.0 之前的语法来访问 Ember Data 中的模型（请参阅https://github.com/emberjs/data/blob/master/TRANSITION.md）。试试

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

另外，Students 模型的定义应该是单数的。毕竟，您正在定义一个学生的班级。所以

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

不确定这是否能解决问题！