Question

我正在尝试在Ember中打开一个模态对话框表单 - 我有一个表单，我希望用户在处理工作流程之前提交评论，但到目前为止我一直无法找到任何好的文档如何打开模态对话框（在哪里放置控制器，路由，模型等）。我是Ember的新手，所以请耐心等待。感谢。

Answer 1

我在Ember上跟着被称为“掌握你的模态”的this guide，他们的工作很棒！

我强烈推荐它。

TL; DR

在此处创建模板：

创建名为 my-modal 的组件。在组件js中添加以下内容：

export default Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
        }
    },
    show: Ember.on('didInsertElement', function() {
        Ember.on('hidden.bs.modal', function() {
          this.sendAction('close');
        }.bind(this), this.$('.modal').modal());
    })
});

将以下代码添加到组件hbs（模板）：

<div class="modal fade"  data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title text-center">{{title}}</h2>
      </div>
        {{yield}}
    	<div class="modal-footer">
		</div>
    </div>
  </div>
</div>

现在，您需要为调用组件的模式的特定用途创建模板。称之为：waitingModal或loadingModal或任何你喜欢的。在这个模态模板中，您可以像这样调用组件：

{{＃my-modal title ='Loading Modal'ok ='save'close ='removeModal'}} {{/我的模态}}
将以下内容添加到应用程序路径中：

showModal：function（name，model）{ this.render（name，{ 进入：'应用'，插座：'模态'，型号：型号 }）; }，

最后要在点击按钮后调用模态，在按钮的操作中需要调用：

this.send('showModal','loading-modal');

其中loading-modal是您正在调用的特定模板。

并删除模态：

this.send('removeModal');

希望这有帮助！

Answer 2

您可以use an addon或implement the recipe from the cookbook。

Answer 3

我正在使用ember-dialog。只需一个命令ember install ember-dialog并在船上进行对话。以下是您正在寻找的使用示例：

export default Ember.Controller.extend({

  // Injecting dialog service
  dialog: Ember.inject.service(),

  model: { username: "Something" },

  actions: {
    showForm: function() {
      this.get("dialog").blank("path-to-some-form", this, {
        acceptHandler: "save"
      });
    },
    save: function(presenter) {
      var isValid = true;
      if (isValid) {
        // Closing presenter
        presenter.accept();
      }
    }
  }

});

模板（/app/templates/path-to-some-form.hbs）：

<form {{action "accept" on='submit'}}>
  {{!-- contextObject here is controller --}}
  {{input value=contextObject.model.username}}
  <button class="w-btn w-btn__default" type="submit">Send</button>
  <button class="w-btn w-btn__danger" type="button" {{action "decline"}}>Cancel</button>
</form>

在Ember中创建一个模态对话框

3 个答案: