选择列表中的KnockoutJs绑定问题

KnockoutJs binding issue on select list

本文关键字：绑定 问题 KnockoutJs 列表 选择      更新时间：2023-09-26

我使用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;
}

我们将绑定设置为(响应是来自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的属性时，它会设置一个空白列表。

查看knockoutJs的chrome上下文调试器，数据正确地出现在元素中(在$data. languages . symbol (_latestValue)和解析的上下文下)。我做错了什么吗?

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

如果你用langs.push(lang);代替langs.push(ko.observable(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>

相关文章：