是否可以在將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/