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

Extended ember app to include new route and now nothing renders

本文关键字：任何渲 应用程序 成员 包括新 扩展      更新时间：2024-05-09

我正在学习成员教程-

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',
}];

主题控制器：

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

a主题路线：

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应用程序中所做的完全相同的步骤，但现在当我转到浏览器时，没有任何渲染。有人知道为什么吗？

在为您描述的教程中，有一个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');
    }
});
相关文章：