npm 包 marionette.modalservice 使用教程

阅读时长 7 分钟读完

介绍

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

纠错
反馈