如何为嵌套的动态路由渲染 ember 模板？答案

【问题标题】：How to render ember template for a nested dynamic route?如何为嵌套的动态路由渲染 ember 模板？
【发布时间】：2021-01-05 14:29:20
【问题描述】：

js`，我已经声明了一些这样的嵌套路由：

Router.map(function() {
  this.route('index', { path: '/' })
  this.route('orders', function() {
    this.route('details', { path: '/:order_id' });
  });
  this.route('not-found', { path: '/*path' });
});

这里orders.details 模板没有渲染，但它会转到正确的路由文件，这是路由文件：

import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    const { order_id } = params;
    console.log('params', params);
    return order_id;
  },
  renderTemplate() {
    this.render('orders/details')
  }
});

我还在orders 文件夹中以嵌套方式声明了模板：

这不会渲染orders/details 模板，它总是会转到orders 模板。这是我的orders/details.hbs 模板：

<h2>Order {{this.model}}</h2>
{{outlet}}

这是我导航到路线的方式： {{#link-to 'orders.details' order.id}}{{order.description}}{{/link-to}}

【问题讨论】：

您如何导航到 orders.details？
我在@Gaurav 问题中更新了这一点
订单路由模板中有{{outlet}}吗？

标签： javascript ember.js handlebars.js ember-router grunt-ember-templates

【解决方案1】：

正如@Gaurav 所说，看看你是否忘记在订单模板中使用{{outlet}}

{{!-- Orders.hbs --}}
{{!--  any content for orders--}}
{{outlet}} {{!-- orders.details will load here--}}

因此，如果您不包含 {{outlet in your orders template ，则不会加载 orders.details }}

【讨论】：