javascript - knockout.js 没有正确设置选择选项

Question

也许我误解了它是如何工作的。我想使用 knockout.js 来填充选择元素选项。我正在使用以下标记来实现此目的:

<select data-bind="options: type_options, optionsText: function(item) {
            return item.text;
        }, optionsValue: function(item) {
            return item.value;
        }, optionsCaption:'Select a type...',
        value: type">

相关模型代码如下:

 var myModel = {
    type: ko.observable(),

    type_options: ko.observableArray([
        {text: "String 1", value:1},
        {text: "String 2", value:2},
        {text: "String 3", value: 3},
        {text: "String 4", value: 4},
        {text: "String 5", value: 5}
    ]),
 }

现在下拉列表正确呈现，具有所有正确的文本和值，但是当我从下拉列表中选择一个选项时，它没有正确设置“类型”的值。

例如，如果我选择了标有“String 4”的选项，并在浏览器中运行以下命令:

myModel.type()

我希望它返回值“4”。相反，我得到了整个对象的对象:

Object
     text: "String 4"
     value: 4
     __proto__: Object

我的问题是如何根据选项的 value 属性而不是整个对象来设置 type 的值？

Answer 1

好吧，您应该能够在选项数组中传递变量的文本而不是函数。我不知道这是否是导致问题的原因，但您的标记看起来会更好

<select data-bind="options: type_options, optionsText: 'text', optionsValue: 'value', optionsCaption:'Select a type...', value: type"></select>

这应该可以满足您的需求，请参阅 fiddle完整的例子。