Question

我有两个具有相同选项的选择输入，并且在第一个选择中更改值应禁用第二个（包括）所选的一个中的所有先前选项，并将第二个选择的值设置为第一个下一个值。我已经设置了一个工作小提琴here。

<select data-bind="options: selectList, value: firstSelect"></select>
<select data-bind="options: selectList, value: secondSelect, minVal: firstSelect"></select>

我创建了自定义绑定处理程序：

ko.bindingHandlers.minVal = {
    update: function (element, valueAccessor) {
        var firstValue = ko.utils.unwrapObservable(valueAccessor());
        var firstNext=null;
        $(element).children().each(function () {
            var $this = $(this);
            if ($this.val() <= firstValue) {
                $this.attr('disabled', 'disabled');
            } else {
                if (firstNext==undefined){
                    firstNext=$this.val();
                }                
            }
        });
        $(element).val(firstNext).trigger('change');
    }
};

它适用于你改变第一次选择它将禁用所有先前的选项在第二，并设置第二个值到第一个下一个值，但问题是当用户想要在第二个更改值，它不能做因为自定义绑定的更新总是根据第一个设置值。所以我的问题是如何知道自定义绑定如何更新值，从更改valueAccessor（）可观察或通过更改第二个选择手动？

Answer 1

我认为问题在于触发变更事件。

我采用了稍微不同的方法将数组切片为计算值，并将第二个列表绑定到该值。

HTML：

<select data-bind="options: selectList, value: firstSelect"></select>
<select data-bind="options: secondSelectList, value: secondSelect"></select>

使用Javascript：

ViewModel = function () {
    var self = this;
    self.firstSelect = ko.observable();
    self.secondSelect = ko.observable();
    self.selectList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    self.secondSelectList = ko.computed(function(){
        return self.selectList.slice(self.firstSelect(), self.selectList.length);
    }, self);
};

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

小提琴：

http://jsfiddle.net/QDpPk/

Answer 2

我找到了解决方案，这是纯粹的逻辑问题。在更新值之前，询问新值（手动选择表单更改选择选项）是否大于应从自定义绑定中选择的值，您可以将值更改为您想要的值。

if (firstNext >= $(element).val()) {
    $(element).val(firstNext);
    $(element).change();
}

这是更新的小提琴：http://jsfiddle.net/9gGjq/4/

Knockout自定义绑定从其他observable更新observable

2 个答案: