Question

我有一个名为hero的组件（在application.hbs中），我希望仅在主页中显示该组件。

我研究过这个怎么做但没有成功。谢谢！

Answer 1

几分钟后在GitHub上进行一些搜索...

只需安装ember install ember-truth-helpers并检查路线名称：

{{#if (eq currentRouteName 'index')}}
  {{hero}}
{{/if}}

很高兴帮忙！

Answer 2

我需要更多细节，但是，我将假设你的家乡路线是'/'路线。

'/'路由实际上是您的索引路由，因此如果您创建index.hbs文件，它将作为索引路由的模板。然后你应该将hero组件移动到index.hbs文件中。

Answer 3

您还可以使用{{component 'blog-post'}}帮助器动态渲染组件，从而在模板中保存条件语句。

帮助程序的第一个参数是要呈现的组件的名称，作为字符串。因此{{blog-post}}与使用{{component}}相同。

当传递给component的参数计算为null或undefined时，帮助程序不会呈现任何内容。当参数更改时，将销毁当前呈现的组件，并创建并引入新组件。

因此，您可以安全地将任何内容传递给table { width:100px; border:1px solid black; } th, td { word-break:keep-all; border:1px solid black; }帮助程序，在您的情况下，您可以动态创建组件名称，而不必担心会引发错误。

https://guides.emberjs.com/v2.1.0/components/defining-a-component/#toc_dynamically-rendering-a-component

Answer 4

我无法确定您的理由，但我怀疑这可能是一个解决方案。

有一个看不见的应用程序＆＃39;路线...还有一个隐含的指数＆＃39;路线，但你可以跳过这种混乱，只是创建一个家庭＆＃39;路由并给它一个到根的路径。应用程序模板将容纳插座 - 然后您可以将组件放置在＆＃39; home＆＃39;模板;

（不要写这样的申请路线，但只是为了可视化）

Router.map(function() {
  // overarching 'application' route
  this.route('application', function() {
    this.route('home', { path: '/' });
    this.route('other');
  });
});

Here is a twiddle完整的示例。如果这不能做你想做的事，那么请参考条件建议。：）

Router.map(function() {
  // here's an example of skipping of skipping the mysterious 'index' in another situation
  this.route('books', function() {
    this.route('books-list', { path: '/' });
    this.route('book');
  });
});

如何仅在特定路线中显示组件？

4 个答案: