ember.js EmberJS在应用程序中显示路由器型号.hbs

tf7tbtn2 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(151)

我正在使用Ember.js，我试图让我的页面在导航栏下面显示页面的标题。为了使这个工作，我试着使用模型挂钩，并在 application.hbs 文件中显示它。
到目前为止，我已经尝试了不同的方法：

路由/联系人.js*

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

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

模板/应用程序.hbs*

<div>
  <NavBar />

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

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

我大多数时候都是在 application.hbs 中使用 @model，比如 outlet.@model。但是所有这些尝试都导致了空的标题或者模板编译器错误。有人有解决这个问题的方法吗？最好是不涉及jquery的方法。

ember.js

来源：https://stackoverflow.com/questions/62066623/emberjs-show-router-model-in-application-hbs

2条答案

按热度按时间

yhxst69z1#

如果我正确理解了您要完成的任务，那么这是services的一个很好的用例。
你需要两个部分：一个服务来跟踪页面标题，然后你需要在应用程序控制器中注入这个服务，这样模板就可以访问这个服务，同时你还需要在路由中注入页面标题服务，这样你就可以在相应的钩子中更新页面标题。
1.寻呼服务

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

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

1.应用控制器和模板
第一个

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中。
希望这对你有帮助！

赞(0）回复(0）举报 2022-11-05

tez616oj2#

由于您已经创建了名为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}}位置（请参阅此处）
有关详细参考，请查看此twiddle

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js EmberJS在应用程序中显示路由器型号.hbs

2条答案

相关问题

热门标签

最新问答