将缺失项插入到绑定到ko.bindingHandlers.options的数组中

Question

我有下面的场景。

示例性JavaScript：

function Foo() {
   this.id = ko.observable("KEY_1"); //Current selected item
   this.list = [{ id: "KEY_2", text: "Two" }, { id: "KEY_3", text: "Three" }]; //All available items
}

ko.applyBindings(new Foo());

这是绑定到一个HTML的帮助下的值和选项bindingHandlers。

data-bind="value: id, optionsEx: list"

可能当前选定的项目不包括在所有可用项目的列表中，因为它已在服务器上被删除，并且不能再被选中。由于历史原因，一些实体仍然将KEY_1设置为id的值。我想要的是，如果id的值不再在列表中，那么它应该被客户机上的bindingHandler动态添加为名为“删除”的虚拟条目。

我尝试了以下方法

ko.bindingHandlers["optionsEx"] = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var allBindings = allBindingsAccessor(),
            optionsValue = allBindings['optionsValue'],
            value = ko.utils.unwrapObservable(allBindings['value']),
            list;

        if (value) {
            list = //external function searching the list for the item any adding it if missing
            ko.bindingHandlers.options.update(element, function () { return list; }, allBindingsAccessor);
        } else {
            ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
        }
    }
};

但这不管用。有人能给我一个提示来实现这一点吗？

更新:我创造了一个小提琴。它很有趣，因为代码在jsfiddle中工作，而不是在我们的开发分支中工作。我得检查一下为什么。但也许有人有更好的想法来实现这一功能。

http://jsfiddle.net/philipooo/C46A8/

更新:如我所见，bindingHandlers的顺序是关键任务。也许这能解决我的问题。

Answer 1

我看了一下这样做的各种方法，并在不存在的情况下，将新值添加到选项中指定的基列表中。径直向小提琴走去

businessUnitsList: ko.observableArray([{
    id: "a",
    title: "business1"
}, {
    id: "b",
    title: "business2"
}, {
    id: "c",
    title: "business3"
}, {
    id: "d",
    title: "business4"
}]),

基列表数组必须是一个observableArray，以便在添加新值时被敲除自动更新)，然后触发列表刷新。

设置绑定的HTML：

<select data-bind="missingText:'{val} is DELETED',
   options:businessUnits.businessUnitsList,
   optionsText:'title',
   optionsValue:'id', 
   value:businessUnits.currentlySelected">
</select>

"missingText“属性钩入绑定处理程序，并允许配置文本，以及文本{val}中未作为令牌找到的值。

在绑定处理程序中，我称之为"missingText“

    ko.bindingHandlers["missingText"] = {

    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bind) {
    var allBindings = allBindingsAccessor(),
        items = allBindings['options'],
        value = ko.utils.unwrapObservable(allBindings['value']),
        valueProperty = ko.utils.unwrapObservable(allBindings['optionsValue']),
        textProperty = ko.utils.unwrapObservable(allBindings['optionsText']),
        missingTextProperty= ko.utils.unwrapObservable(allBindings['missingText']),
        valueSetter = allBindings['value'],
        list
    //we must have the two properties specified
    if (!valueProperty || !textProperty){
        throw ("missingText requires the optionsText and optionsValue property to be provided");   
    }

    if (value) {
        //try and find the currentlySelected value in the list
        var found = ko.utils.arrayFilter(items(), function (item) {
            //we're binding to a particular field for the value
            //so look for that as the value
            return item[valueProperty] == value;
        });

        //if we haven't found it in the list, add it with our missingText text
        if (found.length === 0) {

            var newItem ={};
            newItem[valueProperty]=value;
            //replace token with the value that's missing
            newItem[textProperty]=missingTextProperty.replace('{val}', value);  
        //adding the new item to the items list will trigger the list to refresh
            //and display our new value                
        items.push(newItem);

        }

这又是小提琴

希望这能帮上忙？