5

optionsCaption 绑定通常存在问题：即使只有一个元素，它也总是会显示。我们使用自定义绑定解决了这个问题：

ko.bindingHandlers.optionsAutoSelect = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var allBindings = allBindingsAccessor();

        if (value.length == 1) {
            allBindings.optionsCaption = null;
        }
        ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
    }
};

更新到淘汰赛 3.0 后 allBindings 变为只读。因此，实际上跳过了任何更改。任何想法如何在 ko 3.0 中解决？我们确实有很多这样的自动选择，并且不想在所有视图上复制粘贴一些计算代码。所以我们想要一些单一的选项/扩展点。不幸的是，正如我所见，选项绑定相当单一。

4

1 回答 1

6

可能你可以在这里采取一些不同的方法。这是一个想法（请随意使用比 更好的名称optionsPlus）：

ko.bindingHandlers.optionsPlus = {
    preprocess: function(value, name, addBindingCallback) {
        //add optionsCaption to the bindings against a "caption" sub-observable
        addBindingCallback("optionsCaption", value + ".caption"); 

        //just return the original value to allow this binding to remain as-is
        return value;
    },
    init: function(element, valueAccessor) {
        var options = valueAccessor();

        //create an observable to track the caption
        if (options && !ko.isObservable(options.caption)) {
            options.caption = ko.observable();
        }

        //call the real options binding, return to control descendant bindings
        return ko.bindingHandlers.options.init.apply(this, arguments);
    },
    update: function(element, valueAccessor, allBindings) {
        var options = valueAccessor(),
            value = ko.unwrap(options);

        //set the caption observable based on the length of data
        options.caption(value.length === 1 ? null : allBindings.get("defaultCaption"));

        //call the original options update
        ko.bindingHandlers.options.update.apply(this, arguments);        
    }

};

你会像这样使用它：

<select data-bind="optionsPlus: choices, defaultCaption: 'choose one...'"></select>

它从您的 observableArray/array 中创建一个captionobservable，并在最初和每当更新选项时更新标题（如果使用 observableArray）。

示例：http: //jsfiddle.net/rniemeyer/jZ2FC/

于 2013-12-06T18:34:18.293 回答