在Ember中渲染一个引导模态内的表单

Question

已经有很多关于Ember模态的问题(比如这个和这个).即使是食谱也有一篇文章解释了如何使用模态,但这些都没有提到需要从模式中的服务器进行验证的提交(即已经使用的用户名).

随着食谱,我在我的应用程序模板中有一个命名插座.

{{outlet}}
{{outlet modal}}

并且触发在模态插座内部渲染模板的动作(使用引导程序).

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'

显然我是在一个链接中调用这个动作.

<a href="#" {{action openModal "person.edit" model}}>Edit</a>

model当前路线的模型在哪里.

在PesonEditViewI钩子didInsertElement函数中启用bootstrap模态.在这个钩子里面,hidden.bs.modal当点击关闭按钮以清除模态插座时,我也会听到bootstrap触发的事件.

App.PersonEditView = Ember.View.extend

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

我的问题是,如何在服务器上验证之后定义一个save关闭模态(使用bootstraps动画)的动作？我看到的事件序列是:1)在控制器上触发,2)如果成功保存,关闭模态(这需要从视图中调用).save@$('.modal').modal('hide')

我不确定Ember专家会在这里提出什么建议,因为看起来好像视图和控制器需要非常密切地沟通.

谢谢!

---

编辑

在回应edpaez的评论时,我试图解决save视图中返回的承诺.例如,在我的模板中

<button type="button" class="btn btn-primary" {{action "save" target="view"}}>Save</button>

风景

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

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

  # the rest omitted for brevity

和控制器

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

我收到以下错误

Uncaught TypeError: Cannot call method 'then' of undefined

Answer 1

尝试将save操作定位到视图：

<button type="button" class="btn btn-primary" {{action "save" target="view"}}>Save</button>

并调用save控制器中的方法。该方法将返回一个承诺，该承诺将在save模型中的方法解析时解析。

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

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


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

这样，控制器抽象了模型保存逻辑，并且视图在模型保存时收到通知，因此它可以按预期运行。

确保save调用控制器中的方法而不是发送操作。该send方法不返回任何内容。

希望能帮助到你！