Question

我有这样的模型

function SearchFilterOption(data){
    var self    =   this
    self.List           =   ko.observableArray([])
    self.SelectedOptions    =   ko.observable(0)
    self.SelectedOptionText     =   ko.computed(function(){
        return self.SelectedOptions()
    })
}

这是绑定

<select multiple="multiple"
    data-bind="
        options:List,
        optionsText:"Description",
        optionsValue:"Value",
        optionsCaption:"---",
        value:0,
        selectedOptions:SelectedOptions"
></select>

这是列表中的json。

"Countries": [
            {"Value": 1,"Description": "United States"}, 
            {"Value": 2,"Description": "Canada"},
            {"Value": 3,"Description": "United Kingdom"},
            {"Value": 4,"Description": "Pakistan"},
            {"Value": 5,"Description": "India"}
]

现在，当我选择多个国家/地区时，他们的ID会存储在selectedOptions中并显示在此约束

中

<p data-bind="text:SelectedOptionText"></p>

这一切都运行良好，但我想显示逗号分隔文本而不是像United States , Canada等ids。我该怎么做。我试过这个

self.SelectedOptionText     =   ko.computed(function(){
    var selectedItems = ko.utils.arrayFilter(self.List(),function(item){
        if(in_array(item.Value,self.SelectedOptions())){
            return item.Description
        }
    })

    return selectedItems.join(',')          
})

但是它总是返回对象而不是Description。如果数组很大，它在浏览器上会慢下来注意：in_array是一个取自here phpjs.org。

的实用程序

Answer 1

ko.utils.arrayFilter顾名思义只会过滤您的商品，而不会对其进行转换。

您需要单独的ko.utils.arrayMap，其中您可以获得每个项目的Description，您现在可以加入这些项目：

self.SelectedOptionText = ko.computed(function () {
    var selectedItems = ko.utils.arrayFilter(self.List(), function (item) {
        return in_array(item.Value, self.SelectedOptions());
    });
    var selectedDescriptions = ko.utils.arrayMap(selectedItems, function (item) {
        return item.Description;
    });
    return selectedDescriptions.join(',');
})

注意：您还误用了in_array中的ko.utils.arrayFilter，因为在回调中，如果要包含元素，则需要返回true元素，这样您才能返回结果in_array电话。

演示JFiddle。

或者您可以在一次ko.utils.arrayForEach调用中执行相同的查找和映射：

self.SelectedOptionText = ko.computed(function () {
    var selectedDescriptions = [];
    ko.utils.arrayForEach(self.List(), function (item) {
        if (in_array(item.Value, self.SelectedOptions()))
            selectedDescriptions.push(item.Description);
    });
    return selectedDescriptions.join(',');
})

演示JSFiddle。

如何在knockout.js中从multiselect对象数组列表中显示selectedOptions的文本

1 个答案: