淘汰自定义绑定以从其他 observable 更新 observable答案

【问题标题】：Knockout custom binding to update observable from other observable淘汰自定义绑定以从其他 observable 更新 observable
【发布时间】：2013-01-23 00:33:19
【问题描述】：

我有两个具有相同选项的选择输入，并且在第一个选择中更改值应该禁用第二个（包括）选择一个中的所有先前选项，并将第二个选择的值设置为第一个下一个值。我已经设置了一个工作小提琴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() 可观察或通过更改第二个选择手动更改？

【问题讨论】：

标签： knockout.js custom-binding

【解决方案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/

【讨论】：

感谢 BeaverProj，这种方法运行良好，但仍然无法解决我的问题。我还编辑了您的代码以使用列表的其他值： [code]self.secondSelectList = ko.computed(function(){ return self.selectList.slice(self.selectList.indexOf(self.firstSelect()))+ 1、self.selectList.length); });[/code]

【解决方案2】：

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

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

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

【讨论】：