介绍
marionette.modalservice
是一个 npm
包,它提供了一种方便的方式来管理 Backbone.Marionette
应用程序中的模态对话框。
尤其适用于需要增加一个消息框、确认框、带表单的对话框等情况,基本上,所有需要在页面上弹出对话框的情况都可以使用 marionette.modalservice
来管理。
安装
首先,你需要安装 npm
,
npm install marionette.modalservice
得到了包之后,可以再使用 Webpack 或者 Browserify 等构建工具进行依赖导入。
使用步骤
1. 初始化 ModalService
首先,我们需要在应用程序中初始化 ModalService
。
import { ModalService } from 'marionette.modalservice'; var options = { container: '#modal-container' }; var modalService = new ModalService(options);
这里,我们提供了一个 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