javascript - 如何在 Mithril.js 中叠加弹出 View ？

Question

作为深入学习基本 JS 编程(在最新浏览器上)的实践练习，我正在构建一个 SPA 来维护客户记录。我使用的唯一外部库是 Mithril.js MVC。到目前为止，我已经从我的数据库中获得了一个包含实时数据的 TableView ，其中包括每条记录的编辑、合并和删除按钮。编辑已完成并且运行良好，使用内联“表单”并保存/取消即可。

我现在正在尝试实现删除和合并，这两者都需要在执行操作之前进行弹出确认，这就是我遇到的问题。我确切地知道在桌面 GUI 环境中我会做什么，所以障碍可能是我对浏览器前端的了解比对 Mithril 本身更不了解。

理想情况下，我想创建一个独立的、可重用的“弹出”组件来表示弹出窗口，但我看不出我应该如何使用 Mithril 在 JS 中执行此操作，尤其是但不仅限于，如何让 Mithril 将一个 View 叠加在另一个 View 之上。

我们将不胜感激任何帮助，从广泛的大纲到具体的代码片段。

Answer 1

您可能想使用 View 模型标志来控制模式弹出窗口的可见性。

//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)，或者使用您自己的 CSS 样式 .modal

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