如何覆蓋Mithril.js中的彈出視圖？

作爲深入學習裸機JS編程（在最新的瀏覽器上）的實踐練習，我正在構建SPA來維護客戶記錄。我使用的唯一外部庫是Mithril.js MVC。到目前爲止，我已經從我的數據庫獲得了一個帶有實時數據的表格視圖，其中包括每條記錄的編輯，合併和刪除按鈕。編輯完成並運行良好，使用內嵌「表單」並保存/取消。如何覆蓋Mithril.js中的彈出視圖？

我現在正試圖實施刪除和合並，兩者都需要彈出確認才能被執行，這是我被卡住的地方。我確切地知道我在桌面GUI環境下會做什麼，所以這個障礙可能是我對瀏覽器前端的理解比對Mithril本身更加缺乏。

理想情況下，我想創建一個自包含的，可重用的「彈出」組件代表彈出窗口，但我不明白我應該如何在JS中使用祕銀做這件事，特別是，，如何讓祕銀把另一個視圖疊加在一起。

從廣泛的概述到特定的代碼片段，我們將不勝感激任何幫助。

來源

2014-09-18 Lawrence Dol

您可能想要使用視圖模型標誌來控制模式彈出窗口的可見性。

//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框架存在的一個（例如引導），或樣式.modal用自己的CSS

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

來源

2014-09-19 01:56:19 LeoHorie

'm（「.modal」，body（））'是否正確？它應該不是'm（「div.modal」，body（））嗎？ – 2014-09-20 01:45:37

如果未指定，元素默認爲'div'。 – AlexG 2014-10-01 07:16:52

我不我知道我是不是很想獲得MVC，但我只是簡單地設置一個包含彈出窗口細節的視圖模型對象，然後當生成視圖時（如果當前設置的話），我填充包含彈出框的div。 CSS控制外觀和定位。

所以基本上我依靠祕銀自上而下的重新渲染方法來有條件地構建基於當前應用程序狀態的視圖 - 它運行得非常好，對我來說是非常明智的。

我實際上使用了一個彈出確認對象的列表，所以多個確認可以排隊。

在控制器中，進行確認隊列：

function Controller() { 
    ... 
    this.confirmation     =[]; 
    ... 
    }

在視圖中，創建一個確認視圖div，如果有一個確認排隊，或空佔位符否則（Mithrils差分如果容器元素穿上效果最好」牛逼出現和消失，從渲染到渲染）：

function crtView(ctl) { 
    ... 
    return m("div", [ 
     ... 
     crtConfirmationView(ctl), 
     ... 
     ]); 
    } 

function crtConfirmationView(ctl) { 
    var cfm=ctl.confirmation[0]; 

    return m("div#popup-confirm",(cfm ? muiConfirm.crtView(ctl,cfm.title,cfm.body,cfm.buttons) : null)); 
    }

然後，每當需要確認，只需按下一個確認對象到隊列中，讓祕銀的繪圖系統的運行和重建的看法。

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輔助函數crtView需要創建一個確認視圖，然後採取行動，當用戶點擊一個按鈕（或按ENTER或ESCAPE等） - 只是標準的UI的東西你抽象成共享的可重用組件。

注：萬一有人有關於數組的索引的問題，因爲我已經使用數組索引來識別數據模型中的記錄（刪除完成後，數組元素應該被刪除搬走）。相反，我使用數據庫ID來定位受影響的記錄，這對於模型中的干預更改具有彈性，例如對列表進行排序。

來源

2014-10-11 20:42:10

感謝您抽出時間全力以赴。要玩一個類似的東西在一個新的小提琴 – 2014-10-11 21:45:38

@Steven：不用擔心;如果您有問題，請發表評論，我會盡力及時回覆。我正在做一個今天必須完成的演示，但我會盡我所能提供幫助。 – 2014-10-11 22:18:48

如何覆蓋Mithril.js中的彈出視圖？

回答

相關問題