Javascript 如何在Mithril.js中覆盖弹出视图?
作为深入学习基本JS编程(在最新浏览器上)的实践练习,我正在构建一个SPA来维护客户记录。我使用的唯一外部库是Mithril.js MVC。到目前为止,我已经从数据库中获得了一个包含实时数据的表视图,其中包括每个记录的编辑、合并和删除按钮。使用内联“表单”和save/cancel进行编辑,效果良好 我现在正在尝试实现删除和合并,这两种方法都需要在执行操作之前进行弹出确认,这正是我遇到的问题。我确切地知道在桌面GUI环境中我会做什么,因此,障碍可能是我对浏览器前端的理解不足,而不是对Mithril本身的理解不足 理想情况下,我希望创建一个自包含、可重用的“弹出”组件来表示弹出,但我不知道如何在JS中使用Mithril来实现这一点,特别是,但不仅仅是,如何使Mithril将一个视图覆盖在另一个视图之上Javascript 如何在Mithril.js中覆盖弹出视图?,javascript,user-interface,browser,mithril.js,Javascript,User Interface,Browser,Mithril.js,作为深入学习基本JS编程(在最新浏览器上)的实践练习,我正在构建一个SPA来维护客户记录。我使用的唯一外部库是Mithril.js MVC。到目前为止,我已经从数据库中获得了一个包含实时数据的表视图,其中包括每个记录的编辑、合并和删除按钮。使用内联“表单”和save/cancel进行编辑,效果良好 我现在正在尝试实现删除和合并,这两种方法都需要在执行操作之前进行弹出确认,这正是我遇到的问题。我确切地知道在桌面GUI环境中我会做什么,因此,障碍可能是我对浏览器前端的理解不足,而不是对Mithril
任何帮助都将不胜感激,从大纲到特定的代码片段。您可能希望使用视图模型标志来控制模式弹出窗口的可见性
//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;
}
我不知道我是否不是很了解MVC,但我只是设置了一个包含弹出窗口细节的视图模型对象,然后在生成视图时(如果当前已设置),我填充包含弹出窗口的div。CSS控制外观和定位 因此,基本上我依赖于Mithril的自顶向下的重新渲染方法,根据当前应用程序状态有条件地构建视图——它工作得非常好,对我来说是内在的 我实际上使用了一个弹出确认对象列表,因此多个确认可以排队 在控制器中,创建确认队列:
function Controller() {
...
this.confirmation =[];
...
}
在视图中,如果有确认队列,则创建确认视图div
,否则创建空占位符(如果容器元素在渲染之间不出现或消失,则Mithrils差分效果最佳):
然后,每当需要确认时,只需将确认对象推入队列,让Mithril的绘图系统运行并重建视图
function deleteRecord(ctl,evt,row,idx,rcd) {
var cfm={
title : m("span","Delete Customer: "+rcd.ContactName),
body : [
m("p","Do you really want to delete customer "+rcd.CustomerId+" ("+rcd.ContactName+") and all associated appointments and addresses?"),
m("p.warning", "This action cannot be undone. If this is a duplicate customer, it should be merged with the other record."),
],
buttons : deleteButtons,
proceed : "delete",
index : idx,
record : rcd,
};
ctl.confirmation.push(cfm);
}
确认对象包含confirm
helper函数crtView
创建确认视图,然后在用户单击按钮(或按ENTER或ESCAPE等)时采取操作所需的任何属性,这些属性只是将其抽象为共享可重用组件的标准UI内容
注意:为了防止有人对数组索引有疑问,我不再使用数组索引来标识数据模型中的记录(当删除完成时,数组元素应该被删除)。相反,我使用数据库ID来定位受影响的记录,该数据库ID能够抵抗模型中的干预性更改,例如对列表进行排序。是否
m(“.modal”,body())
正确?是否应该是m(“div.modal”,body())
?如果未指定,元素默认为“div”。感谢您花时间将其全部列出。在一个新的世界里玩类似的东西fiddle@Steven:不用担心;如果您有任何疑问,请发表评论,我将尽力及时回复。我正在做一个今天必须完成的演讲,但我会尽我所能提供帮助。
function deleteRecord(ctl,evt,row,idx,rcd) {
var cfm={
title : m("span","Delete Customer: "+rcd.ContactName),
body : [
m("p","Do you really want to delete customer "+rcd.CustomerId+" ("+rcd.ContactName+") and all associated appointments and addresses?"),
m("p.warning", "This action cannot be undone. If this is a duplicate customer, it should be merged with the other record."),
],
buttons : deleteButtons,
proceed : "delete",
index : idx,
record : rcd,
};
ctl.confirmation.push(cfm);
}