javascript - 是否可以在将 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>
    

是否可以在加载/更改时将 optionsValue 存储在 nameId 中，并将 optionsText 存储到 nameSomething 中选项？

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

任何帮助将不胜感激。也欢迎对新 knockout 用户提出任何好的建议。

编辑

包括 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>