基於按鈕點擊事件的彈窗,是各種軟件中一項最為基本的功能。如下圖所示,點擊取消訂單按鈕,將會彈出一個窗口,讓用戶確認是否要取消訂單。
ChiTu Store 封裝了兩種類型的彈窗,confirm 和 toast,前者是確認,后者是在點擊事件的函數,執行成功后彈出一個提示窗口,並關閉。
一、窗口的 HTML 代碼
我們來看看 ChiTu Store 是如何封裝的。
confirm 窗口:
<a data-bind="tap:$parent.cancelOrder, click:$parent.cancelOrder, visible:Status() == 'WaitingForPayment'" data-dialog='confirm:"你取消該定單嗎?"' href="javascript:" class="btn btn-block btn-default">取消訂單</a>
toast 窗口:
<button name="btn_add" class="btn btn-primary pull-right" data-bind="tap: addToShoppingCart,click: addToShoppingCart, enable: ko.unwrap(product.Stock) > 0, text:ko.unwrap(product.Stock) > 0 ? '加入購物車' : '已經售磬'" data-dialog="toast:'成功添加到購物車'"> 加入購物車 </button>
二、重寫 knockout click 事件
和上篇文章所說的一樣,都是基於重寫 knockout 的 click 事件。我們在 translateClickAccessor 函數中,可以看到下面的代碼:
confirm 窗口的實現,簡單解釋一下代碼,首獲取 data-dialog 屬性的字符,並把 data-dialog 屬性的字符變成一個對象。因為 confirm 是彈窗,點擊了“確認”按鈕后,再執行的。這是一個串行操作,所以看到把原來的 deferred 變得一個串行操作,點操了 ok 按鈕(result.reslove),就執行,cancel 取消(result.reject)。
var config = getConfig(element, 'data-dialog'); if (config.confirm) { var content = config.confirm; deferred = deferred.pipe(function () { var result = $.Deferred(); var html = ComfirmDialogHtml; var node = $(html).appendTo(document.body).modal()[0]; var model = { text: content, ok: function () { $(node).modal('hide'); result.resolve(); }, cancel: function () { result.reject(); } } ko.applyBindings(model, node); return result; }); }
toast 窗口的實現,由於 toast 窗口,是在執行完畢才執行的,所以在 result.done 函數回調。
result.done(function () { if (config.toast) { var content = config.toast; var html = ToastDialogHtml; var node = $(html).appendTo(document.body).modal()[0]; var model = { text: content } window.setTimeout(function () { $(node).modal('hide'); $(node).remove(); }, 1000); ko.applyBindings(model, node); } });
相關的代碼,在 github 的 ChiTuStore 項目中可以找到。有任何疑問可以給我留言。