项目分享八：基于按钮点击事件的弹窗

基于按钮点击事件的弹窗，是各类软件中一项最为基本的功能。以下图所示，点击取消订单按钮，将会弹出一个窗口，让用户确认是否要取消订单。

ChiTu Store 封装了两种类型的弹窗，confirm 和 toast，前者是确认，后者是在点击事件的函数，执行成功后弹出一个提示窗口，并关闭。

1、窗口的 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>

 

2、重写 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 项目中能够找到。有任何疑问能够给我留言。

 

项目分享七：客户端防止表单重复提交

项目分享六：图片的延迟加载

项目分享五：H5图片压缩与上传 

项目分享四：购物车页面的更新 

项目分享三：页面之间的传值

项目分享二：APP 小红点中数字的处理

项目分享一：在项目中使用 IScroll 所碰到的那些坑