Различные пользовательские интерфейсы/шаблоны в одном приложении

Question

Имейте ситуацию, когда я хотел бы иметь два типа интерфейса. Одним из них является приложением по умолчанию, а другой является полноэкранный режим для входа в систему экранов и т.д.

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

{{outlet main}} 

{{outlet alternative}} 

Я тогда мастер шаблон:

{{partial "wrapper"}} 

{{outlet}} 

{{partial "footer"}} 

Что визуализируется в {{outlet main}} путем (я использую Ember App Kit, поэтому ниже эквивалентно App.ApplicationRoute = Ember.Route.extend ({...):

export default Ember.Route.extend({ 

    renderTemplate: function() { 
     this._super(); 
     this.render('master', { 
      outlet: 'main', 
      into: 'application' 
     }); 
    }, 

}); 

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

Я думал, что я мог бы отключить {{outlet main}} с disconnectOutlet в моем LoginRoute, и просто нажать новый шаблон для входа в {{outlet alternative}} так:

export default Ember.Route.extend({ 

    renderTemplate: function() { 
    this.disconnectOutlet({ 
     outlet: 'main', 
     into: 'application' 
    }); 

    this.render('login', { 
     outlet: 'alternative', 
     into: 'application' 
    }); 
    }, 

}); 

Это однако, приводит к {{outlet main}} еще оказывается (я полагаю, из-за ApplicationRoute - renderTemplate of LoginRoute не переопределяет его?), И под ним подбирается шаблон входа (ака, вниз по странице/ниже складки).

Кто-нибудь знает, как выполнить полное переключение интерфейса в Ember?

Answer 1

Это, безусловно, возможно. В зависимости от вашего варианта использования, если вы просто хотите снести некоторые из точек для определенных маршрутов, вы можете использовать disconnectOutlets. Однако, если вы хотите перейти на более низкий уровень, чем это, и полностью поменять основной шаблон, который приложение использует для каждого маршрута, это все еще довольно легко сделать. Посмотрите на пример this jsbin.

Answer 2

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

шаблоны/application.hbs

{{outlet}} 

и тогда вы могли бы использовать вложенные виды и компоненты разбить Applicaton:

Templa TES/main.hbs

{{view 'TopNav'}} 
{{view 'Blog'}} 
{{view 'Footer'}} 

шаблоны/alternative.hbs

{{view 'Blog'}} 

Answer 3

ember-elsewhere хорошо подходит для разборки вещей вне обычной иерархии маршрутов и рекомендуется в Ember docs.

Создать цель:

{{from-elsewhere name="my-right-sidebar"}} 

В любом другом месте в вашем приложении, объявить, какой компонент должен оказывать в цели - полной со связанными входами и действиями:

{{to-elsewhere named="my-right-sidebar" 
    send=(component "cool-thing" 
    model=model launch=(action "launchIt"))}} 

Других примерами здесь: https://ef4.github.io/ember-elsewhere/