选择列表上的 KnockoutJs 绑定问题答案

【问题标题】：KnockoutJs binding issue on select list选择列表上的 KnockoutJs 绑定问题
【发布时间】：2017-02-27 23:15:01
【问题描述】：

我将 Typescript 与 KnockoutJs 一起使用，但在绑定 optionsText 和 optionsValue 时遇到问题。型号为：

 export interface LanguageProxy {
    ID: number;
    Name: string;
    Code: string;
    IsSparse: boolean;
    HasAudio: boolean;
    ReadsRightToLeft: boolean;
    IsAsian: boolean;
    ShortCode: string;
    LongCode: string;
    CultureCode: string;
    IsEnabled: boolean;
    IsCustom: boolean;
}

我们将绑定设置为（响应是来自网络服务调用的响应）：

var langs = ko.observableArray([]);
        response.LanguageProxyListResult.forEach(lang => {
            langs.push(ko.observable(lang));
        });

        this.Languages = langs;
        ko.applyBindings(this, jQuery("#QuickSearchContainer")[0]);

我们正在使用以下 HTML 进行绑定：

<select name="ddlLanguage" id="ddlLanguage" class="LanguageList"  
                                data-bind="options: Languages,
                                            optionsText: 'Name',
                                            optionsValue: 'ID',
                                            optionsCaption: 'Choose...',
                                            optionsAfterRender: function (e) { jQuery('#ddlLanguage')[0].selectedIndex = 1;}">

                            </select>

数据绑定正确，去掉optionsText和optionsValue返回[object] [OBJECT]的列表，但是添加optionsText和value的属性时会设置一个空白列表。

查看 chrome 的 knockoutJs 上下文调试器，数据正确显示在元素中（在 $data.Languages.Symbol(_latestValue) 和已解析的上下文下）。从根本上说我做错了什么吗？

【问题讨论】：

标签： javascript typescript knockout.js

【解决方案1】：

我认为options 绑定不支持数组中的可观察对象。

如果你只用langs.push(lang); 替换langs.push(ko.observable(lang));，它应该可以工作。

当对象位于 observable 数组中时，将对象包装在 observable 中没有任何意义。

复现问题，注意第二个select会抛出错误。

var opts = ko.observableArray([
  { name: "Option 1" },
  { name: "Option 2" }
]);


var obsObs = ko.observableArray([
  ko.observable({ name: "Option 1" }),
  ko.observable({ name: "Option 2" })
]);


ko.applyBindings({
  opts: opts,
  obsObs: obsObs
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: opts, optionsText: 'name'"></select>
<select data-bind="options: obsOpts, optionsText: 'name'"></select>

【讨论】：

成功了，谢谢你解释问题，我还在学习框架。