介绍
marionette.modalservice 是一个 npm 包，它提供了一种方便的方式来管理 Backbone.Marionette 应用程序中的模态对话框。
尤其适用于需要增加一个消息框、确认框、带表单的对话框等情况，基本上，所有需要在页面上弹出对话框的情况都可以使用 marionette.modalservice 来管理。
安装
首先，你需要安装 npm，
--- ------- -----------------------
得到了包之后，可以再使用 Webpack 或者 Browserify 等构建工具进行依赖导入。
使用步骤
1. 初始化 ModalService
首先，我们需要在应用程序中初始化 ModalService。
------ - ------------ - ---- --------------------------
--- ------- - -
---------- ------------------
--
--- ------------ - --- ----------------------这里，我们提供了一个 options 参数，在 options 中，我们指定了 ModalService 需要使用的元素容器的选择器。也就是每一个弹出的信息框都会附加到指定选择器中。
2. 通过 show 方法弹出模态框
现在，我们可以在 Marionette 应用程序中使用 modalService.show 方法来弹出模态框。
------ - --------- - ---- --------------------------
--- ----------- - --- -----------
--------- ------------------
------ --- -------
-------- -
-
---------- --- ---------
----- ------
--
-
---------- --- ----------
----- ---------
------ ----
-
-
---
-------------------------------在这个例子里面，我们创建了一个 myModalView，并指定了一个 template 用于渲染视图，title 用于设置对话框的标题，以及 buttons 数组配置按钮。然后，我们使用 modalService.show 方法来实际显示对话框视图。
3. 关闭之前打开的对话框
有时候，需要在打开一个新的对话框时，自动关闭当前已打开的对话框，这很容易实现，只需要调用 modalService.closeAll 即可。
------ - --------- - ---- --------------------------
--- ----------- - --- -----------
--------- ------------------
------ --- -------
-------- -
-
---------- --- ---------
----- ------
--
-
---------- --- ----------
----- ---------
------ ----
-
--
------------------ ----
---
------------------------
-------------------------------在这里，我们首先调用了 modalService.closeAll 来关闭当前打开的对话框，然后再打开一个新的对话框。
4. 按钮配置
ModalView 的 buttons 数组配置在上面的示例中已经有所体现，现在我们进一步说明一下。
-------- -
-
---------- --- ---------
----- -------
-------- ----------------------
--
-
---------- --- ----------
----- --------
------ ----
-
-在每一个 button 对象中，我们可以设置 iconClass 来指定按钮的图标样式，text 来指定按钮显示的文本，onClick 来指定按钮点击事件的处理函数。
除此之外，还可以设置 close: true 来指定按钮关闭当前对话框。
5. 事件处理
我们可以使用 onBeforeShow 以及 onBeforeRender 方法来处理对话框事件。
--- ----------- - --- -----------
--------- ------------------
------ --- -------
-------- -
-
---------- --- ---------
----- ------
--
-
---------- --- ----------
----- ---------
------ ----
-
--
------------- ---------- -
------------------- -------
--
--------------- ---------- -
------------------- ---------
-
---示例代码
下面是一个简单的示例代码，可以方便的了解 marionette.modalservice 的使用。
------ - ------------- --------- - ---- --------------------------
--- ------- - -
---------- ------------------
--
--- ------------ - --- ----------------------
--- ----------- - --- -----------
--------- ------------------
------ --- -------
-------- -
-
---------- --- ---------
----- -------
-------- ----------------------
--
-
---------- --- ----------
----- --------
------ ----
-
--
------------- ---------- -
------------------- -------
--
--------------- ---------- -
------------------- ---------
-
---
-------------------------------总结
marionette.modalservice 可以有效地管理应用程序中的模态对话框，并提供了一些简单而实用的特性来帮助我们方便地操作对话框。
在使用 Marionette 开发应用程序时，尤其需要注意操作 UI 组件的统一性，否则容易造成混乱和代码不协调的情况。
现在你已经了解了 marionette.modalservice 的使用方法，快去实践一下吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f89238a385564ab6d81