为什么使用挖空在确认框中单击“取消”时删除记录
Why the record is deleting on clicking Cancel in a confirmation box, using knockout
<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
记录被删除,因为单击绑定会覆盖单击事件。您必须将确认放入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 处理程序。
我同意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/
相关文章:
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- 如何通过jQuery选中所有复选框并在单击一个复选框时取消选择
- 旋转和取消旋转图像单击与 javascript
- 选择文件(表单提交)后无法单击“取消”按钮
- 在简单模式中,取消单击时不会调用onClose事件..当我在simple-modal上加载另一个jquery对话框时
- 单击时更改 DIV 的样式,取消单击时再次更改
- 使用双击事件时如何取消单击事件
- 如何制作整行以及其中的复选框,当我在表格行内单击时单击和取消单击
- 传单 - 鼠标悬停,单击和取消单击
- 拉斐尔圆环图单击和取消单击部分
- 当鼠标按下孩子时取消单击父级
- 单击和取消单击带有计数的复选框
- 计数 + / - 用于复选框单击和取消单击
- 在单击和取消单击时验证多个选择器
- 复选框取消单击事件Javascript
- 如何在取消单击时恢复以前的输入值
- 取消单击数据绑定
- 从mousedown处理程序中取消单击处理程序
- 当有人取消单击复选框时,如何更改背景颜色