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

Answer 1

我认为options绑定不支持数组中的observable。

如果仅将langs.push(ko.observable(lang));替换为langs.push(lang);，则应该有效。

当一个对象存在于一个可观察的数组中时，将它包装在一个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>

选择列表中的KnockoutJs绑定问题

1 个答案: