EmberJS 嵌套资源模板不起作用

Question

我有一个 Ember 应用程序没有为嵌套资源的路由加载模板。很确定我在这里遗漏了一些非常明显的东西，但我无法弄清楚问题是什么。

每当我转到 http://localhost:4200/dashboard/appointments/new 时，我只会看到一个空白页面。

这是我的 router.js 文件：

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

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

Router.map(function() {
  this.route('signup', { path: '/register' });
  this.route('login', { path: '/login' });
  this.route('logout', { path: '/logout' });

  this.resource('user', { path: '/dashboard' }, function() {
    this.resource('appointment', { path: '/appointments' }, function() {
      this.route('new', { path: '/new' });
    });
    this.resource('item', { path: '/items' }, function() {});
  });
});

export default Router;

这是我的目录结构：

|__app.js
|__controllers
| |__login.js
|__router.js
|__routes
| |__application.js
| |__login.js
| |__logout.js
| |__signup.js
| |__user
| | |__appointment
| | | |__new.js
| | |__appointment.js
| | |__item.js
| |__user.js
|__templates
| |__application.hbs
| |__components
| |__login.hbs
| |__logout.hbs
| |__partials
| |__signup.hbs
| |__user
| | |__appointment
| | | |__new.hbs
| | |__appointment.hbs
| | |__item.hbs
| |__user.hbs

我确定（在我的 templates 目录中）我的 user.hbs 文件和我的 user/appointment.hbs 文件都有 {{outlet}}。我检查了控制台，URL 工作正常（没有 URLNotFound 错误）。唯一的问题是我在 templates/user/appointment/new 中的模板没有被加载。现在所有其他模板都是空的，其中包含 {{outlet}}。

知道问题出在哪里吗？非常感谢您的帮助！

Answer 1

鉴于您当前的路由结构，您需要将新的约会模板置于 templates/appointment/new。

JSBin

另一种自行调试的方法是使用 Ember Inspector 插件。转到您要找出的 URL，转到检查器的“路线”部分，选中该框以将您看到的内容限制为当前路线，然后在模板列下查看它正在寻找的模板。在你的情况下，它说它正在 appointment/new.

寻找模板

EmberJS 嵌套资源模板不起作用

EmberJS Nested resource templates not working

javascript

ember.js