Rendering a form inside a bootstrap modal in Ember

Question

There are plenty of questions already that ask about modals in Ember (like this one and this one). Even the cookbook has an article that explains how to use modals, but none of these cover form submissions that require validation from the server within the modal (ie, username already taken).

Following along with the cookbook, I have a named outlet in my application template.

{{outlet}}
{{outlet modal}}

And an action that triggers rendering a template inside the modal outlet (using bootstrap).

App.ApplicationRoute = Ember.Route.extend

  actions:
    openModal: (template, model) ->
      @controllerFor(template).set('model', model)
      @render template, into: 'application', outlet: 'modal'

    closeModal: ->
      @render '', into: 'application', outlet: 'modal'

Obviously I'm calling this action from within a link.

Edit

Where model is the model of the current route.

In the PesonEditView I hook into the didInsertElement function to enable the bootstrap modal. Inside this hook, I also listen to the hidden.bs.modal event fired by bootstrap when the close button is clicked to clear out the modal outlet.

App.PersonEditView = Ember.View.extend

  didInsertElement: ->
    @$('.modal').modal('show').on 'hidden.bs.modal', =>
      @get('controller').send('closeModal')

My question is, how can I define a save action that will close the modal (using bootstraps animations) after it has validated on the server? The sequence of events that I see are required are, 1) save gets triggered on controller, 2) if successful save, close the modal (which would require calling @$('.modal').modal('hide') from the view).

I'm not sure what Ember experts would suggest here, since it seems as though the view and controller will need to communicate very closely.

Thanks!

EDIT

In response to edpaez's comment, I have tried resolving the promise returned by save from within the view. For example, in my template

The view

App.PersonEditView = Ember.View.extend
  actions:
    save: ->
      @get('controller').send('save').then(@closeModal.bind(@))

  closeModal: ->
    @$('.modal').modal('hide')

  # the rest omitted for brevity

And the controller

App.PersonEditController = Ember.ObjectController.extend
  actions:
    save: ->
      @get('model').save()

I get the following error

Uncaught TypeError: Cannot call method 'then' of undefined

Rendering a form inside a bootstrap modal in Ember

1 Answers