Ember JS показать модель роутера в application.hbs - PullRequest
Новая
       80

Ember JS показать модель роутера в application.hbs

0 голосов
/ 28 мая 2020

Я работаю с 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 например розетка. @ Модель . Но все эти попытки привели к пустым заголовкам или ошибкам компилятора шаблонов. У кого-нибудь есть решение для этого? Желательно тот, который не включает jquery?

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Если я правильно понимаю, что вы пытаетесь выполнить sh, это хороший вариант использования services .

Вам нужна пара частей. Служба для отслеживания заголовка страницы, а затем вам нужно внедрить эту службу в контроллер приложения, чтобы шаблон имел доступ к службе, а также внедрить службу заголовка страницы в маршруты, чтобы вы могли обновить заголовок страницы в соответствующие крючки.

  1. Страничная служба 
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 .

Надеюсь, это поможет!

1 голос
/ 28 мая 2020

Поскольку вы создали новую страницу (маршрут) с именем contact, часть пользовательского интерфейса страницы должна быть в соответствующем файле шаблона, то есть templates/contact.hbs и не templates/application.hbs как файл templates/contact.hbs может получить доступ только к @model из routes/contact.js

ie., приведенная ниже разметка должна находиться в файле templates/contact.hbs и будет отображаться при доступе к странице по адресу http://localhost: 4200 / contact 

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

Также обратите внимание, что разметка, присутствующая в файле templates/contact.hbs, будет отображаться вместо {{outlet}} шаблона приложения (см. здесь )

Для подробной справки проверьте это twiddle

...