Дочерние компоненты шаблона Ember application.hbs не перезагружаются

Я пытаюсь реализовать панель навигации, которая отображает либо Sign in, либо Sign out в зависимости от логического значения в Ember Service, которое я внедрил в маршрут application (определенный в routes/application.js).

Я также прочитал это и это подтверждает мой выбор сервисного подхода к обработке состояния.

Теперь вопрос и проблема в том, что дочерние компоненты не обновляются, когда я перенаправляюсь с одного маршрута на другой. Если в ссылке указано Sign in, после успешной аутентификации и входа ссылка все равно будет содержать Sign in. Только когда я обновляю страницу, текст ссылки меняется на Sign out. Поведение ссылки Sign out такое же.

Код в application.hbs:

  {{nav-bar isAuthenticated=isAuthenticated}} ==> seems like only loaded once
  {{outlet}}

Код для ссылок входа и выхода в nav-bar.hbs:

  {{log isAuthenticated }} ==> only prints upon page load, doesn't print on route changes
  {{#if isAuthenticated}}
    <ul class="nav navbar-nav navbar-right">
      {{#link-to 'logout' tagName="li" class="nav-item"}}<a class="nav-link" href="">Logout</a>{{/link-to}}
    </ul>
  {{else}}
    <ul class="nav navbar-nav navbar-right">
      {{#link-to 'login' tagName="li" class="nav-item"}}<a class="nav-link" href="">Login</a>{{/link-to}}
    </ul>
  {{/if}}

Мои действия при входе:

  this.transitionTo('dashboard');

Проблема в том, что он переходит без обновления панели навигации. Это почему? Что я могу сделать, чтобы обойти эту проблему?

Обновление в отношении комментариев и первого ответа:

Что делать, если у меня нет контроллера приложений? У меня есть это до сих пор в моем приложении Route, но оно все еще не обновляется, хотя я передаю данные на компонент панели навигации:

  simpleAuthManager: Ember.inject.service(),
  isAuthenticated: Ember.computed('simpleAuthManager', 'simpleAuthManager.user', function() {
    console.log(this.get('simpleAuthManager.user'));
    return this.get('simpleAuthManager').isAuthenticated();
  }),

  setupController(controller, model) {
    this._super(controller, model);
    controller.set('isAuthenticated', this.get('isAuthenticated'));
  }

person Sticky    schedule 10.01.2018    source источник
comment
Вам нужно создать вычисляемое свойство с именем isAuthenticated в контроллере приложения, а затем обновлять его с помощью notifyPropertyChange всякий раз, когда вы входите в систему или выходите из нее, чтобы она всегда оставалась синхронизированной.   -  person alizahid    schedule 10.01.2018
comment
Я не думаю, что это сработает. потому что вы вызываете setupController только один раз на маршруте приложения. для этого нужен контроллер. или еще лучше, сделайте это в компоненте панели навигации. но не забудьте обновить свойство, чтобы представление обновлялось.   -  person alizahid    schedule 11.01.2018
comment
Потрясающий! Это сработало :) спасибо   -  person Sticky    schedule 11.01.2018


Ответы (1)


Вычисляемое свойство требуется для повторного вычисления состояния при каждом изменении isAuthenticated.

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

Настройте вычисляемое свойство, которое отслеживает вашу переменную isAuthenticated из вашей службы в вашем контроллере приложения (создайте контроллер, если у вас его нет). Передайте isAuthenticated в качестве параметра компоненту панели навигации. В компоненте навигационной панели также внедрите службу и установите состояние аутентификации в действии каждый раз, когда щелкается ссылка входа/выхода.

Таким образом, каждый раз, когда кто-то входит в систему или выходит из нее, ваша служба обновляется, и, как следствие, ваше isAuthenticated вычисляемое свойство в вашем контроллере приложения.

Вы можете прочитать о вычисляемых свойствах Ember здесь.

person krtkgpt    schedule 11.01.2018