这是我当前的代码
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
最佳答案
解决方案是使用整个对象作为“选定值”。然后,您可以轻松区分“显示”的内容和“存储”的内容。
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>
关于javascript - 是否可以在将 optionsValue 存储在下拉列表中的同时显示 optionsText?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33528761/