javascript - KnockoutJS 关联数组和选择列表

Question

我目前有一个数字框，用户可以在其中输入数字 1、2 或 3，并在此基础上设置一些条件格式。

但是，我希望数字字段成为一个下拉列表，其中显示“短”、“长”和“非常长”之类的内容，但在幕后，传递的实际值是 0、1、或 2.让它只显示数字很容易，但是，我很难弄清楚如何将 0 与“Short”配对，等等。

这是一个关于在事情开始崩溃之前我能走多远的 fiddle :http://jsfiddle.net/Lxh8e9qv/7/ 。作为旁注，我似乎也无法获取当前长度值来填充下拉列表。

代码中的重要区域是:

HTML

<select  data-bind='options: lengthTypes, value: length' />

JavaScript

var Furniture = function (data) {
   var self = this;
   self.name = ko.observable('');
   self.size = ko.observable('');
   self.length = ko.observable();
   self.lengthTypes = ko.observableArray([0,1,2]);

再一次，我想做的是有一个带有人类可读选项的下拉列表，但在后端传递索引号(0,1,2)。非常感谢。

我知道官方KnockoutJS documentation ，但他们的解决方案似乎是创建对象来填充 lengthTypes 数组，这对于我想要的东西来说似乎太重了。

Answer 1

您可以使用 optionsText 和 optionsValue 绑定(bind)，但您需要将 lengthTypes 更改为observableArray，每个索引处都有对象。

例如 - JSFiddle if you're interested

HTML

<select  data-bind="options: lengthTypes,optionsText:'label',optionsValue:'value', value: length" />

JavaScript

var Furniture = function (data) {
   var self = this;
   self.name = ko.observable('');
   self.size = ko.observable('');
   self.length = ko.observable();
   self.lengthTypes = ko.observableArray([{label: 'Short', value: 0 },{label: 'Long', value: 1 },{label: 'Very Long', value: 2 }]);
}

http://knockoutjs.com/documentation/options-binding.html