EmberJS show router model in application.hbs

Question

I am working with Ember.js, and I am trying to make my pages display the title of the page just below the navbar. To make this work I have tried to use model hook, and show it in the application.hbs file.

So far I have tried variations of this:

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>

I've mostly tried to mess around with @model in application.hbs things like outlet.@model. But all of these attempts have resulted in empty titles or Template Compiler Errors. Does anyone have a solution for this? Preferably one that does not involve jquery?

Answer 1

If I understand correctly what you are trying to accomplish, it is a good use case for services.

You need a couple parts. A service to keep track of the page title, and then you need to inject that service in the application controller so the template has access to the service, and also to inject the page title service in the routes so you can update the page title in the respective hooks.

1. Page service

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

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

2. Application controller and template

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>

3. MyRoute route updating the page title value in a model hook

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"
  }  
}

I have put it all together in an interactive Ember Twiddle demo.

Hope this helps!

Answer 2

Since you have created a new page (route) named contact, the UI part of the page has to be in the corresponding template file, i.e., templates/contact.hbs and not templates/application.hbs as the templates/contact.hbs file can only access the @model of routes/contact.js

ie., the below markup has to in templates/contact.hbs file and will be displayed when accessing the page at http://localhost:4200/contact

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

Also, note that the markup present in the templates/contact.hbs file will be rendered in the place of application template's {{outlet}} (see here)

For a detailed reference, check this twiddle