前言
在日常的前端开发中，很多时候需要和用户进行交互，弹出一些提示框或者询问用户的意见。而 Ember Promise Dialog 正是为这种情况而生的一个 npm 包，它可以帮助我们方便地在 Ember 应用中创建对话框并管理 Promise。
在本篇文章中，我们将详细介绍 ember-promise-dialog 的使用方法，并通过实例代码来演示。
安装
首先，在你的 Ember 应用中安装 ember-promise-dialog：
ember install ember-promise-dialog
快速开始
有了 ember-promise-dialog，让我们开始创建一个简单的对话框吧。首先，在你的应用模板中添加一个按钮来启动对话框：
{{#promise-dialog id="example-dialog" as |resolve reject|}}
<h2>这是一个对话框</h2>
<p>你确定要这样做吗？</p>
<button class="btn btn-default" {{action resolve}}>确定</button>
<button class="btn btn-danger" {{action reject}}>取消</button>
{{/promise-dialog}}
<button {{action (dialog 'example-dialog')}}>启动对话框</button>在这个示例中，我们创建了一个 id 为 example-dialog 的对话框，并在其中添加了一些内容和两个按钮。当用户点击“确定”按钮时，Promise 将会被 resolve；当用户点击“取消”按钮时，Promise 将会被 reject。
接下来，让我们来看一下如何在 controller 中处理这个 Promise：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ - ------ - ---- ----------------
------ - ------ -- ------- - ---- -----------------
------ ------- ----- --------------------- ------- ---------- -
-------- -------
------- ----- ------------ -
--- -
----- -----------------------------------
-- -----------
- ----- --- -
-- ---------
-
-
-在这段代码中，我们注入了 dialog 服务并且创建了一个名为 showDialog 的 Action。当用户点击按钮时，我们使用 dialog 服务展示对话框，并且通过 try-catch 结构来处理返回的 Promise。
到此为止，这个对话框已经可以在你的应用中正常工作了。但是你可能已经注意到了，在这个示例中我们只处理了一个简单的 Promise，而实际上 ember-promise-dialog 可以处理更加复杂的 Promise 状态。
其他用法
带有标题和正文的对话框
在安装包之后，我们还可以使用 promise-dialog 组件来创建具有标题和正文的对话框。例如：
-- -------------------- ---- ------- -------------------------- ------------------- --------------- -- -------- ------- -- ---------------- ------- ---------- ------------ -------- --------------------- ------- ---------- ----------- -------- -------------------- ----------------------------
等待状态
在某些情况下，我们需要等待用户进行操作才能显示对话框。在这种情况下，我们可以使用 withPromise 高阶组件。例如：
{{#withPromise this.isModalShowing}}
<p>Modal is showing.</p>
{{else}}
<button {{action (mut this.isModalShowing true)}}>Show Modal</button>
{{/withPromise}}在这个示例中，我们会等待用户的操作来展示对话框。withPromise 组件会接收一个 Promise 对象作为参数，并且会等待其状态改变为 resolved 或 rejected 才会显示内容。
向对话框中传递一些参数
我们可以通过传递一些参数来修改对话框的行为。例如，我们可以在打开对话框时传递一些内容：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ - ------ - ---- ----------------
------ - ------ -- ------- - ---- -----------------
------ ------- ----- --------------------- ------- ---------- -
-------- -------
------- ----- ------------ -
--- -
----- ----- - ----- ---------------------------------- -
------ --------------------
---
-- ---------------- -----------
- ----- --- -
-- ---------
-
-
-在对话框模板中，我们需要使用这些变量。例如：
-- -------------------- ---- -------
----------------- ------------------- -- -------- ------ --------
----------------
----------------
------
------ ------------ --------------- --
-------
------- ---------- ------------ -------- --- ------- --------------------
------- ---------- ----------- -------- --------------------
-------------------在这段代码中，我们使用了带有 email 参数的 promise-dialog，并在其中使用了这个变量来初始化输入框。当用户点击“确定”按钮时，我们将会把 email 变量传递给 resolve 函数，并且这个变量将会变成一个 Action 参数。
结论
通过本文，我们已经学习了如何使用 ember-promise-dialog 这个 npm 包来创建简单、复杂、可配置的对话框，并且用代码示例证明了其具有深度和学习以及指导意义。在之后的开发过程中，你可以在应用中方便地使用这个包并且在建立前后端之间信任的交互体验方面得到更好的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb3d