如何在Mithril.js中叠加弹出视图？

Question

作为深入学习简单JS编程(在最新浏览器上)的实践练习,我正在建立一个SPA来维护客户记录.我使用的唯一外部库是Mithril.js MVC.到目前为止,我有一个包含来自我的数据库的实时数据的表视图,其中包括每个记录的编辑,合并和删除按钮.编辑完成并运行良好,使用内联"表单"并保存/取消该工作.

我现在正在尝试实现删除和合并,两者都需要一个弹出确认才能被操作,这就是我被困住的地方.我确切地知道我在桌面GUI环境中做了什么,所以路障可能是我对浏览器前端缺乏了解而不是秘银本身.

理想情况下,我想创建一个自包含,可重用的"popup"组件代表弹出窗口,但我看不出我应该如何使用Mithril在JS中这样做,特别是,但不仅仅是如何制作秘银将一个视图叠加在另一个视图之上.

从广泛的大纲到具体的代码片段,我们将不胜感激.

Answer 1

您可能希望使用视图模型标志来控制模态弹出窗口的可见性.

//modal module
var modal = {}
modal.visible = m.prop(false)
modal.view = function(body) {
  return modal.visible() ? m(".modal", body()) : ""
}

//in your other view
var myOtherView = function() {
  //this button sets the flag to true
  m("button[type=button]", {onclick: modal.visible.bind(this, true)}, "Show modal"),

  //include the modal anywhere it makes sense to
  //its visibility is taken care by the modal itself
  //positioning is controlled via CSS
  modal.view(function() {
    return m("p, "modal content goes here")
  })
}

要创建模式对话框,您可以使用其中一个CSS框架中的样式(例如Bootstrap),或.modal使用您自己的CSS样式

/*really contrived example to get you started*/
.modal {
  background:#fff;
  border:1px solid #eee;
  position:fixed;
  top:10px;
  left:100px;
  width:600px;
}