Question

我在这个小提琴http://jsfiddle.net/2vNBB/5/中阻止了我想要实现的场景。

用户单击一个复选框，系统会提示他们是否要更改该设置，但是在小提琴中，您可以看到复选框仍然处于检查状态，无论采取了哪些操作，但是observable反映了更改。

复选框应显示正确的值但不显示。

HTML

<div class="checkbox-inline">
    <label>
        <input type="checkbox" data-bind="checked: IsAggregate, click: updateAggregate" />
    </label>
</div>
<br/>
<span>This is the observable value: </span><span data-bind="text: IsAggregate"></span>

JS

 var ViewModel = function () {
    var self = this;
    self.IsAggregate = ko.observable(true);

    self.updateAggregate = function () {
        if (confirm("Are you sure you want to click that?")) {
            self.IsAggregate(self.IsAggregate());      
        } else {
             self.IsAggregate(!self.IsAggregate());  
        }
    };
};

var vm = new ViewModel();
ko.applyBindings(vm);

UPDATE 这有我正在寻找的功能，但我想将其连接到复选框。 http://jsfiddle.net/2vNBB/10/

Answer 1

之前我必须解决此复选框问题，您需要为yur复选框创建自定义绑定。此解决方案将按预期工作，不会选中/取消选中chebox。

这里是小提琴FIDDLE

ko.bindingHandlers.customChecked = {
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
         element.addEventListener('mousedown', function(e) {
            if (confirm('Are you sure you want to click that?'))
            {
               element.checked = !element.checked;
               valueAccessor()(element.checked);          
            }
         });
         element.checked = valueAccessor()();
    }
}

Answer 2

从函数返回true

var ViewModel = function () {
    var self = this;
    self.IsAggregate = ko.observable(true);

    self.updateAggregate = function () {
        if (confirm("Are you sure you want to click that?")) {
            self.IsAggregate(self.IsAggregate());      
        } else {
             self.IsAggregate(!self.IsAggregate());  
        }
        return true;
    };
};

这是一个更新的小提琴：http://jsfiddle.net/Mq8hj/1

Answer 3

您还可以使用自定义处理程序替换立即单击绑定，并仅在确认更改选项时更改observable的值。这使您可以更好地控制绑定发生的顺序。目前，您实际上更改了属性的值，然后要求确认，然后将其更改回来或将其设置为相同的值...

http://jsfiddle.net/2vNBB/11/

ko.bindingHandlers.ConfirmCheck = {
    init: function (element, valueAccessor) {        
         var isAggregateObservable = valueAccessor();
        element.checked = isAggregateObservable();

        element.onclick = function() {
            if (confirm("Are you sure you want to click that?")) {
                isAggregateObservable(element.checked);
            } else {
                 element.checked = !element.checked;   
            }
        }
    }
}

Answer 4

我知道htis有点旧，但我的便士价值是标记b。几乎拥有它 - 从更新中返回确认框的结果：

self.updateAggregate = function () {
    var confirmResult;

    if ( confirmResult = confirm("Are you sure you want to click that?")) {
        self.IsAggregate(self.IsAggregate());      
    } else {
        self.IsAggregate(!self.IsAggregate());  
    }

    return confirmResult;
};

Fiddle

By default knockout returns false to event hanlders which prevents the default action running。请参阅注释3.此问题也在this回答这里解释了stackoverflow ...

如果您返回tru，则默认为允许并且操作将继续 - 将检查您的框。如果您返回false，则会被阻止。所以你需要做的就是返回确认结果。

无需自定义绑定。

Answer 5

您可以通过使用调用confirm的匿名函数进行任何自定义绑定，如果确认为true则执行删除功能。

<input type="button" data-bind="click: function () { var confirmed = 
confirm('Are you sure you want to remove this?');  if(confirmed) 
UpdateCheckbox(this); }">

仅允许JS上的复选框更新使用Knockout进行确认

5 个答案: