Распределение родительской модели по границам маршрута

Автор оригинала: Ilya Radchenko.

Просто на прошлой неделе Алекс Лафрозия Выпустил новый аддон под названием Эмбер контекст И я хотел поделиться некоторыми узорами, которые я использовал в прошлом, что этот аддон меняется.

Проблема

Иногда у вас есть интернет-интерфейс, где на определенном уровне у вас есть несколько вложенных маршрутов, и они имеют дело с одним из родителей. Например, если у вас была система управления блогами, которая поддерживает несколько блогов, вы можете иметь маршрут, как Dashboard.blog.post.edit и Блог Модель найден в Dashboard.blog маршрут. Поэтому в этот момент вы хотите использовать эту же модель блога в других маршрутах. Исторически там никогда не было отличного способа сделать это, вы, возможно, подумать, поместите его на сервис, но тогда вам нужно зарегистрироваться и очистить эту услугу, поскольку услуги являются глобальными. Наряду с этим неудобством также неясно, где служба получает свои данные, кажется немного магии.

Прошлое

В прошлом я решил эту проблему с Модельфер Метод маршрута, что-то вроде:

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

export default class PostEditRoute extends Route {
  @service store;
  
  async model({ postId }) {
    let blog = this.modelFor('dashboard.blog');
    let post = await this.store.findRecord('post', postId);
    return { blog, post };
  }
}

Теперь я могу получить доступ к блогу в моем шаблоне через {{@ model.blog}} И все это работает. Проблема вот что Модельфер вернется любые данные, которые вы вернулись в Модель крючок Dashboard.blog Маршрут, и это может измениться на объект предметов, таких как {config, blog} И теперь вам нужно посетить каждый Модельфер и изменить там предположение. В тех случаях, когда маршрут не имеет никаких других моделей данных, необходимых, вам придется добавить файл маршрута и сделать весь танец.

Настоящее

С новым Эмбер-контекст Addon, мы можем изменить это на что-то с меньшим количеством котельной, а немного яснее о том, откуда приходят данные. С помощью этого дополнения мы определим следующее в нашем Dashboard.blog шаблон:

  {{outlet}}

Сейчас в нашем Dashboard.blog.post.edit Шаблон мы можем использовать эту модель блога, используя помощника: {{потребляйте-контекстный блог '}} :

{{#let (consume-context 'blog') as |blog|}} 
  {{! use it here }}
{{/let}}

И если мы хотели получить доступ к нему в контроллере или компонент, это было бы так же просто, как впрыскивая значение:

import Component from '@glimmer/component';
import { inject as context } from '@alexlafroscia/ember-context';

export default class PostEditor extends Component {
  @context('blog') blog;
}

Это становится еще более мощным, когда вы создаете пользовательский класс и используете @tracked и @action который может потребляться на верхнем уровне, но вложенные маршруты также могут повлиять на состояние этого класса. Там у вас есть! Вы нашли аналогичные модели, которые улучшаются экстра контекста? Дайте мне знать на Twitter.