Question

我正在关注一个余烬教程 -

http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

并对其进行了编辑以包含新模型和路线。原始教程是一个用户集合的CRUD应用程序。我现在想要扩展应用程序以处理这些用户可能研究的主题列表。 The router.js文件现在看起来像这样 -

App.Router.map(function(){
    this.resource('users', function(){
        this.resource('user', { path:'/:user_id' }, function(){
            this.route('edit');
        });
        this.route('create');
    });

    this.resource('subjects', function(){
    this.resource('subject', {path: '/:subject_id'}, function(){
        this.route('edit');
    });
    this.route('create');
});

});

（主题是一个单独的路线，因为我希望现在能够创建单独的路线）

我添加了subjects.js模型，如下所示：

App.Subject = DS.Model.extend({
    name         : DS.attr(),
});

App.Subject.FIXTURES = [{
    id: 1,
    name: 'History',

}, {
    id: 2,
    name: 'Biology',

}];

a subjectController：

App.SubjectsController = Ember.ArrayController.extend({
    sortProperties: ['name'],
    sortAscending: true // false = descending
});

a subjectRoute：

App.SubjectsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('subject');
    }
});

和索引中的模板如下所示：

<script type = "text/x-handlebars" id = "subjects">
    <ul>
        {{#each subject in controller}}
            <li>{{subject.name}}</li>
        {{/each}}
    </ul>
</script>

我已添加了所有依赖项，并按照与我在其中描述的用户CRUD应用程序所做的完全相同的步骤，但现在当我转到我的浏览器时，没有任何渲染。谁能明白为什么？

Answer 1

在为您描述的教程中，有一条missing路径可以捕获错误的路径，并重定向到users路由，也许您需要将其包含在显示内容中，因为没有显示初始页面的index路线。

使用以下代码更新您的代码：

<强> router.js

App.Router.map(function(){
  this.resource('users', function(){
    this.resource('user', { path:'/:user_id' }, function(){
      this.route('edit');
    });
    this.route('create');
  });

  this.resource('subjects', function(){
    this.resource('subject', {path: '/:subject_id'}, function(){
        this.route('edit');
    });
    this.route('create');
  });

  // this is our 404 error route - see MissingRoute just bellow
  this.route('missing', { path: '/*path' });    
});

// this handles wrong routes - you could use it to redirect to a 404 route or like here to redirect to the index page
App.MissingRoute = Em.Route.extend({
    redirect: function(){
        this.transitionTo('users.index');
    }
});

扩展的余烬应用程序包括新的路线，现在没有任何渲染

1 个答案: