敲除选项绑定，选项不显示答案

【问题标题】：Knockout options binding, options are not displayed敲除选项绑定，选项不显示
【发布时间】：2013-05-04 17:38:29
【问题描述】：

我正在为 knockout.js 的选项绑定而苦苦挣扎。当我不使用选项绑定时，像这样

<select id="AddProductSelect" name="chosenSpaProduct">
   <!-- ko foreach: Spa.SpaProductList -->
         <option data-bind="text: Name" ></option>
   <!-- /ko -->
</select>

它工作正常。在下面的行中，我正在尝试使用这样的选项绑定

<select data-bind="options: Spa.SpaProductList, optionsText: 'Name'"></select>

选择元素中没有显示任何内容。

Spa.SpaProductList 是一个对象数组。关于我做错了什么有什么想法吗？

编辑：相关JS：

    $(document).ready(function () {
       var initialData = @Html.Raw(Json.Encode(Model));
       viewModel = new ViewModel(initialData);
       ko.applyBindings(viewModel);
       viewModel.ViewLoaded(true);

       function ViewModel(initialData) {
           var self = this;
           ko.mapping.fromJS(initialData, {}, self); 
           (...)
       }
    }

【问题讨论】：

你能发布你的相关javascript吗？模型、模型初始化和 applyBindings() 代码。
因为根据您提供的代码，这应该像这个 jsfiddle 中演示的那样工作。 jsfiddle.net/vYdVS 这让我认为这与您对Spa.的引用有关
@FeistyMango 添加了您要求的 js。我认为您对 spa 的引用是正确的，但真的不知道如何调试。有什么提示和技巧吗？我已经尝试使用 $root.Spa... 来确保我在 ViewModel 的根目录中，但它没有帮助。
我知道你没有包括你的整个视图模型，但你甚至没有包括如何在你的视图模型中定义“Spa”或“SpaProductList”。您的 HTML/绑定很好。这是一个使用您的确切 HTML 的示例：jsfiddle.net/psteele/b55FF 您的视图模型中一定有问题。

标签： javascript knockout.js

【解决方案1】：

您似乎缺少optionsValue 参数。来自knockout.js documentation：

如果您想让用户从任意 JavaScript 对象（不仅仅是字符串）数组中进行选择，请查看 optionsText 和 optionsValue 参数

这是他们给出的例子：

<select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry"></select>

【讨论】：

value 属性用于跟踪用户选择的值，不需要显示列表。 Feisty（在问题下）评论中的 jsfiddle 表明它可以在没有它的情况下工作。

【解决方案2】：

我认为您缺少 optionsText。

此示例正在运行：(http://jsfiddle.net/geremora/6VmCh/)

HTML：

       <select data-bind="options: cars,
                   optionsText: 'brand',
                   value: selectedCar,
                   optionsCaption: 'Select...'"></select>

JS：

var Car = function (brand, model) {
   this.brand = brand;
   this.model = model;
};

var viewModel = {
   cars: ko.observableArray([
    new Car("Audi", "A3"),
    new Car("Ford", "Ranger"),
    new Car("Fiat", "500")]),
   selectedCar: ko.observable(), 
 };

 viewModel.selectedCar.subscribe(function (data) {
    console.log(data)
 });

 ko.applyBindings(viewModel);

【讨论】：

这是真的。对不起，应该有一个小错误。你能把代码放在jsFiddle或plunker中吗？。