Как создать вложенные маршруты Dynami c с ember. js, где дочерний маршрут заменяет шаблон родителя? - PullRequest
Новая
       6

Как создать вложенные маршруты Dynami c с ember. js, где дочерний маршрут заменяет шаблон родителя?

0 голосов
/ 20 января 2020

Ember 3.15 (Octane)

Я пытаюсь создать следующие маршруты в своем приложении 

/cars
/cars/:car_id
/cars/:car_id/:model_id

Первые два хороши, и я смог их создать использование ember-cli

ember g route cars
ember g route cars/car

Проблема с третьим состоит в том, что мне нужно, чтобы шаблон model отображался под шаблоном cars, ie. замените шаблон car. Поэтому, если я добавлю {{outlet}} в шаблон car, шаблон model будет отображен в нем нормально, но, очевидно, с этим {{outlet}} ничего не произойдет, когда я перейду к /cars/5/2

Мой маршрутизатор выглядит вот так 

Router.map(function() {
  this.route('cars', function(){
    this.route('car', { path: ':car_id'}, function() {
      this.route('model', { path: ':model_id' });
    });
  });
});

Я пытался использовать индексный маршрут ember g route cars/car/index, но проблема в том, что params недоступны на маршруте index и доступны только на car route.

Как план b, я создал автомобильные и модельные маршруты в качестве маршрутов верхнего уровня ( на основе этого ответа ), но я бы хотел достичь вышеуказанного из-за несколько причин

  • кажется более логичным ie, структурирование приложения на основе вложенности маршрутов
  • У меня есть много вложенных маршрутов и я создаю их все, как маршруты первого уровня. становится трудно поддерживать
  • ember неправильно применяет класс active с этой конфигурацией. Например, если у меня есть навигационная панель с Cars в качестве ссылки, я бы хотел, чтобы она имела стиль active на всех трех страницах. Но это больше не работает, потому что второй маршрут будет называться как car, а третий - как model.
  • . Есть некоторые проблемы с URL, которые создаются по умолчанию с использованием <LinkTo />.

Так что, если у меня есть что-то подобное в моем car шаблоне 

<ul>
  {{#each @model.models as |model|}}
    <li><LinkTo @route="model" @model={{model}}> {{model.title}} </LinkTo></li>
  {{/each}}
</ul>

Фактическая ссылка работает правильно, так как она выводит меня на нужную страницу модели, однако, URL отображается как /cars/undefined/undefined. (Хотя это можно исправить, передав @models={{array @model.id model.id}}, на данный момент это выглядит как обходной путь)

1 Ответ

1 голос
/ 20 января 2020

Решение действительно заключается в использовании маршрута index.

Так же есть cars.car.index и cars.car.model. Однако вы должны использовать маршрут cars.car для загрузки общей модели car. Затем вы можете получить к нему доступ по маршруту cars.car.index с помощью this.modelFor('cars.car').

Затем вы сможете получить доступ к params.car_id по маршруту cars.car, использовать его для загрузки автомобиля, и затем получить доступ к этому автомобилю с маршрутов cars.car.index и cars.car.model с modelFor.

...