Ember Modal на маршруте, доступном из любого места

Question

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

Я хотел бы построить его таким образом, что когда приложение перенаправляется на маршрут «/ settings», модальный диалог появляется с текущим маршрутом в фоновом режиме, как вы ожидали. Затем, когда модаль закрыт, приложение перенаправляет обратно на этот маршрут.

Если пользователь переходит непосредственно к «/ settings» из своего браузера, тогда мода будет отображаться со страницей по умолчанию в фоновом режиме.

Вот то, что я до сих пор:

export default Ember.Route.extend({ 

    defaultParentRoute: "project.index", 

    beforeModel: function(transition){ 
    // get the name of the current route or if 
    // user came directly to this url, use default route name 
    var parent = this.get("defaultParentRoute"); 
    var application = this.controllerFor('application'); 
    if(application && application.get('currentRouteName')) { 
     parent = application.get('currentRouteName'); 
    } 
    this.set("parentRoute", parent); 
    }, 

    renderTemplate: function(){ 
    // make sure the current route is still rendered in the main outlet 
    this.render(this.get("parentRoute")); 

    // render this route into the 'modal' outlet 
    this.render({ 
     into: 'application', 
     outlet: 'modal' 
    }); 
    }, 

    actions: { 
    removeModal: function(page){ 
     // go back to the previous route  
     this.transitionTo(this.get("parentRoute")); 
    } 
    } 

}); 

Это работает очень хорошо при плавании на пути из ссылки в приложении. Однако, если пользователь переходит прямо к «myapp/settings» в своем браузере, тогда шаблон страницы по умолчанию получает визуализацию, но без каких-либо данных, или пытается использовать данные «модели» из моего маршрута настроек.

Как я могу убедиться, что шаблон под модальным объектом визуализируется с соответствующими данными?

Here's a JS Bin to demonstrate. Попробуйте нажать «настройки» на любой странице приложения, а затем обновите браузер, пока модальные модальные настройки открыты.

Answer 1

Эта организация кажется немного неестественной, учитывая соглашения Ember. Как правило, URL-адрес должен представлять собой сериализованную версию состояния, достаточную для восстановления, где был пользователь (see this old discussion).

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

Модальные панели выглядят скорее как раскрывающееся меню, открытие и закрытие которого не изменяют URL-адрес, хотя они представляют собой незначительное изменение состояния.

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

Сложный бит, не имеющий настроек в качестве маршрута, заключается в том, что не существует очевидного места для загрузки модели, которая ведет себя так же хорошо или работает так же легко, как крючок маршрута model (то есть, который ждет, пока обещание не будет разрешено для завершения перехода).

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

SomeController = Ember.Controller.extend({ 
    settings: Ember.inject.service() 
}); 

И есть услуга настройки только показать себя, как только загрузится модель.

SettingsService = Ember.Service.extend({ 
    settingsLoaded: false, 
    ensureLoaded: function() { 
    var _this = this; 
    return new Ember.RSVP.Promise (resolve) { 
     if (_this.get('settingsLoaded')) { 
     resolve() 
     } else { 
     _this.store.find('settings', someId).then(function(model) { 
      _this.set('model', model); 
      _this.set('settingsLoaded', true); 
      resolve(); 
     }); 
     } 
    }; 
    } 
}); 

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

showSettings: function() { 
    this.get('settings').ensureLoaded().then(function() { 
    ... # something to show the modal pane. 
    }); 
}