是否可以在将optionsValue存储在下拉列表中时显示optionsText？

Question

这是我当前的代码

var model = function() { 
 
    this.nameSomething = ko.observable(''); 
 
    this.nameId = ko.observable(0); 
 
}; 
 

 
var vm = (function() { 
 
var myList = [{ id: 1, type: 'foo1'}, { id: 2, type: 'foo2' }, { id: 3, type: 'foo3' }], 
 
    selectedModel = ko.observable(model); 
 
    
 
    return { 
 
     myList: myList, 
 
     selectedModel: selectedModel 
 
    }; 
 
}()); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div data-bind="with: selectedModel"> 
 
    <select data-bind="options: $root.myList, 
 
         optionsText: 'type', 
 
         optionsValue: 'type', 
 
         value: nameSomething"></select><br /> 
 
    Display this: <span data-bind="text: nameSomething"><br /> 
 
    Store this: <span data-bind="text: nameId"><br /> <!-- not displaying anything --> 
 
    <pre data-bind="text: ko.toJSON($root.selectedModel, null, 2)"></pre> 
 
</div> 
 

是否有可能在加载在nameId的optionsValue和optionsText存储nameSomething /更改选项？

我的原因是我需要在UI中显示所选的optionsText，并在数据库中存储optionsValue。

任何帮助将不胜感激。任何新的淘汰赛用户的好指针也是受欢迎的。

编辑

包括一个fiddle

Answer 1

的解决方案是使用整个对象作为 “选择的值”。然后，您可以轻松分离您“展示”的内容和“存储”的内容。

var defaultItem = { 
 
    id: 1, 
 
    type: 'foo1', 
 
}; 
 

 
var vm = (function() { 
 
var myList = [{ id: 1, type: 'foo1'}, { id: 2, type: 'foo2' }, { id: 3, type: 'foo3' }], 
 
    selectedModel = ko.observable(defaultItem); 
 
    
 
    return { 
 
     myList: myList, 
 
     selectedModel: selectedModel 
 
    }; 
 
}()); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
    <select data-bind="options: myList, 
 
         optionsText: 'type', 
 
         value: selectedModel"></select><br /> 
 
    <div data-bind="with: selectedModel"> 
 
     <span>Display this: </span><span data-bind="text: type"></span><br /> 
 
     <span>Store this: </span><span data-bind="text: id"></span><br /> 
 
     <pre data-bind="text: ko.toJSON($root.selectedModel, null, 2)"></pre> 
 
    </div> 
 
</div> 
 

Answer 2

这直接不可能的。至少有三种可能的方法来做到这一点：

1. 使用计算（可以是一个pureComputed），其由阵列
2. 创建可观察到的关键发现值，并订阅nameId的函数更新可观察的

您可以使用selectedOptions结合和订阅或获取从绑定observableArray当前所选选项的值，但它只是另一种选择。

这是一个针对您的问题的解决方案，包含您在您的视图模型中使用的结构，使用第一个选项。

var vm2 = (function() { 
 
    
 
    var list = ko.observableArray(
 
    [{ id: 1, type: 'foo1'}, 
 
    { id: 2, type: 'foo2' }, 
 
    { id: 3, type: 'foo3' }] 
 
); 
 
    
 
    var selectedId = ko.observable(); 
 
    
 
    var selectedType = ko.pureComputed(function() { 
 
    return list().find(function(l) { return l.id == selectedId(); }).type; 
 
    }); 
 
    
 
    return { 
 
    list: list, 
 
    selectedId: selectedId, 
 
    selectedType: selectedType 
 
    }; 
 
    
 
})(); 
 

 
ko.applyBindings(vm2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
    <select data-bind="options: list, 
 
         optionsText: 'type', 
 
         optionsValue: 'id', 
 
         value: selectedId"></select><br /> 
 
    Display this: <span data-bind="text: selectedType"></span><br /> 
 
    Store this: <span data-bind="text: selectedId"></span><br /> <!-- not displaying anything --> 
 
    <pre data-bind="text: ko.toJSON($root.selectedModel, null, 2)"></pre> 
 
</div>

Answer 3

您可以选择不识别optionsValue，将所选择的值设置为完整的对象，你可以做你什么都喜欢......包括具有所有可用属性（如果我有你的问题的权利）

<div data-bind="with: selectedModel"> 
    <select data-bind="options: $root.myList, 
         optionsText: 'type', 
         value: nameSomething"></select><br /> 
     Display this: <span data-bind="text: nameSomething().id"><br /> 
    Store this: <span data-bind="text: nameSomething().nameId"><br /> <!-- not displaying anything --> 
    <pre data-bind="text: ko.toJSON($root.selectedModel, null, 2)"></pre> 
</div> 

看看我的小提琴这里http://jsfiddle.net/bgap47d4/2/