文章/答案/技术大牛

发布

社区首页 >问答首页 >选择列表中的KnockoutJs绑定问题

问选择列表中的KnockoutJs绑定问题
EN

Stack Overflow用户

提问于 2016-10-18 15:31:32

回答 1查看 277关注 0票数 0

我正在使用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返回对象列表，但当添加optionsText属性和值时，它将设置一个空白列表。

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

javascript

typescript

knockout.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-18 15:38:22

我认为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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40112332

复制

相似问题

问选择列表中的KnockoutJs绑定问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择列表中的KnockoutJs绑定问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选择列表中的KnockoutJs绑定问题
EN