Ember 查看子路由时隐藏父模板

Question

我正在为我的网站创建一个简单的博客 Ember。

我的路线：

Router.map(function() {
  this.route('home', { path: '/' });
  this.route('blog', function() {
    this.route('post', {path: '/:post_id'});
  });
});

我想要它，所以当我单击 /blog 中的 post 并在 /blog/:post_id 结束时，我隐藏了 blog.hbs 文件的内容并且只显示blog/post.hbs内容。

我尝试在我的 post.js 路由文件中明确指定渲染模板，但事情一直以同样的方式工作。

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('post', params.post_id, { reload: true });
  },
  renderTemplate: function() {
    this.render('blog/post');
  }
});

阅读此处的文档并没有让我产生任何其他想法。

https://guides.emberjs.com/v1.13.0/routing/rendering-a-template/

我从根本上使用 Ember 是不是错了？如果我想隐藏父模板内容，我的 post URL 不应该是 Blog 的子路径吗？

Answer 1

我不知道，如果你不想嵌套内容，为什么还要嵌套路由。无论如何...

如果您只想 url 反映您的嵌套，试试这个：

Router.map(function() {
  this.route('home', { path: '/' });
  this.route('blog', { path: 'blogs' });
  this.route('post', { path: 'blog/:post_id'});
});

Answer 2

抱歉，@remi 的回答是正确的，但按照惯例这不是正确的。

当你创建这样的东西时：

Router.map(function() {
  this.route('blog', function() {
    this.route('post', {path: '/:post_id'});
  });
});

它隐式创建

Router.map(function() {
  this.route('blog', function() {
    this.route('index', { path: '/' }); // <------ this one
    this.route('post', {path: '/:post_id'});
  });
});

因此，如果您有嵌套路由器，但不想嵌套模板，请将博客模板（和路由）重命名为 index.html。这将类似于重命名：

带 POD

app/blog/route.js -> app/blog/index/route.js

app/blog/template.hbs -> app/blog/index/template.hbs

无 POD

app/routes/blog.js -> app/routes/blog/index.js

app/templates/blog.hbs -> app/templates/blog/index.hbs

这在 Official guide 上有记录（link 适用于最新版本，但也适用于旧版本）

Ember 查看子路由时隐藏父模板

Ember hide parent template when viewing sub-route

javascript

handlebars.js

ember.js