Question

这是我目前的代码

＆＃13;

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);

＆＃13;

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

＆＃13;

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

我之所以这样做，是因为我需要在用户界面中显示所选的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

你可以选择不识别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/

Answer 3

这是不可能的。至少有三种可能的方法：

使用计算（可以是pureComputed），通过数组
创建一个observable，并为更新该observable的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>

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

3 个答案: