0

我正在将一个集合绑定到一个 select multi，集合中的一些项目也在第二个集合中，我想将这些设置为 select multi 中的 selectedOptions。

我希望使用 ko.utils.arrayFilter 来执行此操作，但似乎无法从另一个集合中过滤出一个集合。

http://jsfiddle.net/dumbarse/BcUBK/

<select data-bind="options:availableThings,optionsText: 'Title', selectedOptions: selectedComputeThings" size="5"  multiple="true"></select>
        var initialThingsModel = [
            {"Id":1,"Title":"First"},
            {"Id":2,"Title":"Next"},
            {"Id":3,"Title":"Another"},
            {"Id":4,"Title":"Last"}
        ];
           var initialSelectedThingsModel = [
            {"Id":2,"Title":"Next"},
            {"Id":4,"Title":"Last"}];

    var viewModel = {
        availableThings: ko.observableArray(initialThingsModel),   
        selectedThings:  ko.observableArray(initialSelectedThingsModel)
    };
    viewModel.selectedComputeThings = ko.computed(function() { return ko.utils.arrayFilter(viewModel.availableThings(), function(item) { return item.Id == selectedThings.Id;}) });

        ko.applyBindings(viewModel);
4

1 回答 1

1

您应该修改computed并编写如下内容：

viewModel.selectedComputeThings = ko.computed(function() {
    return ko.utils.arrayFilter(
        initialThingsModel,
        function(thing){ 
            return ko.utils.arrayFirst(
                initialSelectedThingsModel,
                function(sel){ return sel.Id == thing.Id; }
            );
        }
    );
});

作品：http: //jsfiddle.net/BcUBK/1/

更新：

要跟踪您不需要的选择computed- 很简单observableArray（哦，您selectedThings的模型中已经有了！）。只需用对选定事物的参考来填充它。

稍微修改您的selectedThings声明：

selectedThings:  ko.observableArray([])

转换为将 refs 分配给可观察数组computed的简单函数：selectedThings

viewModel.preselectThings = function() {
    viewModel.selectedThings(ko.utils.arrayFilter(
        initialThingsModel,
        function(thing){ 
            return ko.utils.arrayFirst(
                initialSelectedThingsModel,
                function(sel){ return sel.Id == thing.Id; }
            );
        }
    ));
};

在之前/之后的任何地方添加函数调用ko.applyBindings：

ko.applyBindings(viewModel);

viewModel.preselectThings();

并更改selectedComputeThings为selectedThings标记中的任何位置。

利润！

http://jsfiddle.net/BcUBK/3/

于 2013-04-13T19:42:35.037 回答