EmberJS 在 application.hbs 中显示路由器模型

Question

我正在使用 Ember.js，我正在尝试让我的页面在导航栏正下方显示页面标题。为了完成这项工作，我尝试使用模型挂钩，并将其显示在 application.hbs 文件中。

到目前为止，我已经尝试过以下变体：

routes/contact.js

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

export default class ContactRoute extends Route {
  model() {
    return 'Title of page';
  }
}

templates/application.hbs

<div>
  <NavBar />

  <div class="pageTitle">
    <h2>
      <p>{{@model}}</p>
    </h2>
  </div>

  <div class="body">
    {{outlet}}
  </div>
</div>

我主要尝试在 application.hbs 中与 @model 搞混，比如 outlet .@model。但是所有这些尝试都导致了空标题或模板编译器错误。有人对此有解决方案吗？最好是不涉及 jquery?

Answer 1

由于您创建了一个名为 contact 的新页面（路由），页面的 UI 部分必须在相应的模板文件中，即 templates/contact.hbs 和 不是templates/application.hbs因为templates/contact.hbs文件只能访问routes/contact.js

的@model

即，下面的标记必须在 templates/contact.hbs 文件中，并且将在访问位于 http://localhost:4200/contact

的页面时显示

<div class="pageTitle">
  <h2>
    <p>{{@model}}</p>
  </h2>
</div>

另外，请注意 templates/contact.hbs 文件中的标记将在应用程序模板的 {{outlet}} 位置呈现（参见 here）

如需详细参考，请查看此 twiddle

Answer 2

如果我正确理解您要完成的任务，那么这是 services 的一个很好的用例。

您需要几个零件。跟踪页面标题的服务，然后您需要在应用程序控制器中注入该服务，以便模板可以访问该服务，并在路由中注入页面标题服务，以便您可以更新页面标题各自的钩子。

页面服务

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class extends Service {
  @tracked title = "Your App"
}

应用程序控制器和模板

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class ApplicationController extends Controller {
  @service pageTitle;
}

<h1>Welcome to {{this.pageTitle.title}}</h1>
<br>
<br>
{{outlet}}
<LinkTo @route="my-route">my route</LinkTo>
<br>
<br>

MyRoute 路由更新模型挂钩中的页面标题值

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class extends Route {
  @service pageTitle;

  model() {
    this.pageTitle.title = "My Route"
  }  
}

我已将所有内容放在一个交互式 Ember Twiddle demo 中。

希望对您有所帮助！

EmberJS 在 application.hbs 中显示路由器模型

EmberJS show router model in application.hbs

ember.js

ember-router