KnockoutJS 关联数组和选择列表答案

【问题标题】：KnockoutJS Associative Array and Select ListsKnockoutJS 关联数组和选择列表
【发布时间】：2015-04-22 06:52:51
【问题描述】：

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

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

这是我在事情开始破裂之前能够走多远的问题：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 数组，这对于我想要的来说似乎太重了。

【问题讨论】：

看例子3。knockoutjs.com/documentation/options-binding.html
是的。这就是我想要的，但是当我评论答案时，我不想声明一堆新对象。它不够干净。使用 JSON 效果很好，并且比该页面上的解决方案更干净。
不确定您指的是 JSON 对象。我没有看到任何 JSON。你是说对象字面量吗？
也许是这样。你能说我是新手吗？ :)

标签： javascript html knockout.js

【解决方案1】：

您可以使用 optionsText 和 optionsValue 绑定，但您需要将 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

【讨论】：

喜欢在 lengthTypes 数组中使用 JSON 对象。我不知道我以前怎么没想到！它看起来肯定比 Knockout 的官方示例要轻量得多。
再次感谢。对于任何未来的读者，请注意 optionsText 和 optionsValue 周围的引号是强制性的，而 value 选项不需要。