javascript - 为什么使用敲除在确认框中单击取消时删除记录

Question

<tbody data-bind="foreach: Items">

        <tr>                            
            <td data-bind="text: Code"></td>
            <td data-bind="text: SubscriptionName"></td>
            <td data-bind="text: Type"></td>
            <td data-bind="dateText: StartDate, dateFormat: 'MM/DD/YYYY'"></td>
            <td data-bind="dateText: ExpirationDate, dateFormat: 'MM/DD/YYYY'"></td>
            <td data-bind="text: IsOneTime"></td>
            <td data-bind="text: ValueDisplayType"></td>
            <td data-bind="text: IsAvailable"></td>                            
            <td>
                <a data-bind="attr: { href: '/couponcode/edit/' + ID() }"><i class="icon-edit"></i> Edit</a> |                                        
                <a data-bind="click: $root.deletedata" href="javascript:void(0)" onclick="return confirm('Are you sure you wish to delete this record?');"><i class="icon-trash"></i> Delete</a>                                
            </td>                            
        </tr>

    </tbody>





    <script type="text/javascript">
    var couponModel = ko.buildAjaxModel("@ConfigManager.Application.BuildApiUrl("couponcode/get/coupons")", CouponModel.Mapping, function () {
                    console.log(couponModel);
                }, function (item) {

                    console.log(item);
                }, true);
    //This is the working of deletion
                couponModel.deletedata = function (model) {                
                    var save = new Framework.AjaxRequestInfo("@ConfigManager.Application.BuildApiUrl("/couponcode/delete/coupon")"+'/' + model.ID(), function () {
                        console.log(save);

                        Framework.Redirector.Redirect("@Url.Action("Index", "Code")");
                    }, function () {
                    });
                    save.setParamData(couponModel);
                    Framework.AjaxManager.remove(save);
                };

                $(function () {
                    Framework.DataBinder.applyBinding(couponModel, "coupon-codes");
                    couponModel.get();
                });
     </script>

//In controller

Answer 1

记录被删除，因为单击绑定覆盖了 onclick 事件。您必须将确认放入deletedata功能：

<a data-bind="click: $root.deletedata" href="javascript:void(0)"><i class="icon-trash"></i> Delete</a>          

            couponModel.deletedata = function (model) {   
              if (confirm('Are you sure you wish to delete this record?')){
                var save = new Framework.AjaxRequestInfo("@ConfigManager.Application.BuildApiUrl("/couponcode/delete/coupon")"+'/' + model.ID(), function () {
                    console.log(save);

                    Framework.Redirector.Redirect("@Url.Action("Index", "Code")");
                }, function () {
                });
                save.setParamData(couponModel);
                Framework.AjaxManager.remove(save);
              }
            };

你不应该混淆 ko 和一般的 js 处理程序。

Answer 2

我同意 Artem，但我提出了更优雅的方式，无需修改 VM 代码。只需编写自己的clickAndConfirm绑定来包装原始click绑定并在操作前请求用户确认。

ko.bindingHandlers.clickAndConfirm = {
    init: function(el, va) {
        var message = va().message || "Sure?", action = va().action;
        var new_va = function(){
            return function(data){
                return confirm(message) && action.apply(data, arguments);
            };
        };
        arguments[1] = new_va;
        return ko.bindingHandlers.click.init.apply(this, arguments);
    }
}

在绑定声明中指定您的操作函数和确认消息：

<a href="#" data-bind="clickAndConfirm: { action: deletedata, message: 'Are you sure?' }">Do it!</a>

工作示例：http: //jsfiddle.net/M5uYK/