选择列表上的KnockoutJs绑定问题

Question

我在KnockoutJs中使用Typescript，但是在绑定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;
}

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

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的淘汰赛上下文调试器，数据正确显示在元素中（在$ data.Languages.Symbol（_latestValue）和解析的上下文下）。 从根本上说我有做错什么吗？

Answer 1

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

如果您替换langs.push(ko.observable(lang)); 通过仅langs.push(lang); ，它应该可以工作。

当对象位于可观察数组中时，将对象包装在可观察对象中没有任何实质意义。

重现问题，请注意第二个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>