Example modal code

example-modal.coffee

# copied and modified from a working app, but there maybe typos in adaptation
# untested in this form

# router
App.Router.map (match) ->
  @resource 'posts', ->
    @route 'new'
    @resource 'post', path: '/:post_id'


# router handler
# see mixins/posts_formable
App.PostsNewRoute = Ember.Route.extend Lm.PostssFormable,
  model: ->
    App.Post.createRecord()
    

# mixin, so new and edit can use same template/view
App.PostsFormable = Ember.Mixin.create
  renderTemplate: ->
    @render 'posts/form', ->
      outlet: 'modal'
  events:
    cancel: (post) ->
      post.transaction.rollback()
      @transitionTo 'posts'
    submit: (post) ->
      # TODO: add validation handling
      post.get('store').commit()
      if post.didCreate
        @transitionTo 'post', post

# form view
App.PostsFormView = Em.View.extend
  tagName: 'form'
  classNames: 'modal fade in form-custom-field-modal'.w()
  didInsertElement: ->
    @$().modal 'show'
  willDestroyElement: ->
    @$().modal 'hide'

# templates
# posts.hbs (not post.index)
# ...
#  <div class="">
#    {{outlet}}
#  </div>
# </div>
# {{outlet modal}}

# form template
# <div class="modal-header">
#   <div class="button close btn-dismiss" {{action cancel content}}>x</div>
#   <h2 class="app-icon-large">Post</h2>
# </div>

# <div class="modal-body">
# your form code
# ...
# </div>

# <div class="modal-footer">
#   <a class="btn btn-dark" href="javascript;:" {{action cancel content}}>Cancel</a>
#   <button class="btn btn-success" type="submit" {{action submit content}}>Save</button>
# </div>

On line 30, why not do this:

post.on 'didCreate' , ->
   @transitionTo 'post', post

And similarly handle didUpdate for updates.

Highlighting field level validation errors from commit() in the modal would be really useful!