Динамический выход для вложенного маршрута в Ember JS

Я хочу создать интерфейс в Ember, который напоминает что-то вроде Netflix, где при нажатии на название фильма контент отображается под изображением плаката. Мой мозговое это создать вложенный маршрут ж/Динамический выход для вложенного маршрута в Ember JS

Router.map(function() { 
    this.route('movies', {path: '/' }, function() { 
    this.route('movie', { path: '/:id'}); 
    }); 
});

Проблемы заключается в том, что я не знаю, как я могу иметь {{outlet}} внутри каждый компонент фильма и сказать вложенный маршрут, чтобы сделать в соответствующем одной. Кто-нибудь создал что-то похожее на эти вложенные маршруты?

источник

2016-06-24 Kyle Decot

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

Метод 1: Нет URL Государственного

Turn movie-preview и movie-detail на компоненты.

Здесь вы можете использовать focus. Таким образом, выбор другого предварительного просмотра фильма позволит сфокусировать один компонент и сфокусировать его, не требуя обновления каких-либо привязок.

В фильме-preview.js

export default Component.extend({ 
    attributeBindings: ['tabindex'], 
    tabindex: 0, 
    isFocused: false, 
    movie: undefined, 

    focusIn() { 
    this.set('isFocused', true); 
    }, 

    focusOut() { 
     this.set('isFocused', false); 
    } 
});

В шаблоне для кино-просмотра, мы добавим условный.

{{#if isFocused}} 
    {{movie-detail movie=movie}} 
{{/if}}

Однако, возможно, мы хотим отразить это состояние в URL-адресе? Начнем с того, как мы будем делать это для параметров запроса.

Метод 2: пары запроса

На контроллере для маршрута, добавить query param для selected.

В шаблоне для этого маршрута, мы будем использовать eq (помощника, один из возможных реализаций которого является here), чтобы установить isFocused на основе фильма для этого предварительного просмотра, является ли выбранный в данный момент один. Мы также передаем действие для настройки фокуса.

{{#each фильмы, как | фильм |}} {{ кино просмотр фильм = фильм IsFocused = (эк movie.id выбран) выберите = (действие "selectMovie" movie.id) }} {{/ each}}

movie-preview.js будет изменен, чтобы вызвать выбор при нажатии.

export default Component.extend({ 
    isFocused: false, 
    movie: undefined, 
    select: undefined, 

    click() { 
    this.sendAction('select'); 
    } 
});

Наконец, мы должны будем обработать это действие в контроллере для этого маршрута.

export default Controller.extend({ 
    queryParams: ['selected'], 
    selected: undefined, 

    actions: { 
    selectMovie(movieId) { 
     this.set('selected', movieId); 
    } 
    } 
});

Возможно, мы хотели, чтобы у этого был довольно URL-адрес? Это тоже легко.

Метод 3: Довольно URL-адреса

Первый шаг заключается в настройке вложенных маршрутов, как вы показали.

this.route('movies', {path: '/' }, function() { 
    this.route('movie-detail', { path: '/:id'}); 
});

Для этого нам нужен outlet, как вы изначально предложили, но мы не должны делать, что многие изменения в коде от метода 2. Вместо того, movie-detail компонента, мы теперь имеем кино- подробный маршрут. Поскольку нам не нужно было знать подробности этого раньше, я тоже пропущу это. Мы заботимся только о механизме «активации» маршрута.

В шаблоне для предварительного просмотра фильма мы меняем условное обозначение на обертку.

{{#if isFocused}} 
    {{outlet}} 
{{/if}}

В контроллере вместо изменения параметра запроса нам необходимо вызвать переход.

export default Controller.extend({ 
    selected: undefined, 

    actions: { 
    selectMovie(movieId) { 
     this.set('selected', movieId); 

     this.transitionToRoute('movies.movie-detail', movieId); 
    }, 

    clearSelection() { 
     this.set('selected', undefined); 
     this.transitionToRoute('movies'); 
    } 
    } 
});

источник

2016-06-25 02:55:30 runspired

Динамический выход для вложенного маршрута в Ember JS

ответ

Смежные вопросы