淘汰赛组件选择选项答案

【问题标题】：Knockout Components Select Options淘汰赛组件选择选项
【发布时间】：2014-12-17 23:09:52
【问题描述】：

我的头发被扯掉了，谁能救救我...

我想创建一个简单的剔除组件，它根据 JSON 对象呈现一个选择列表。这在我使用简单的字符串数组时有效，但是当我使用 JSON 对象时，使用 optionsText 和 optionsValue 绑定 id 和 name 属性，我得到一个带有 [object object] 的下拉列表。

任何帮助将不胜感激。

        ko.components.register("organization-select", {
            viewModel: function (params) {
                var self = this;
                self.organizationList = ko.observableArray([]);
                self.organizationList(["foo", "bar"]); //this works

                //this doesn't work Result => [Object Object],[Object Object]
                self.organizationList([{ "id": 1, "name": "foo" }, { "id": 2, "name": "bar" }]); 
            },

            template: 'Organizations: <select data-bind="options: organizationList, optionsText: "name", optionsValue: "id""></options>'
            //this works with simple array of strings
            //template: 'Organizations: <select data-bind="options: organizationList"></options>'
        });
        ko.applyBindings();
    });

【问题讨论】：

标签： javascript knockout.js knockout-components

【解决方案1】：

行情看起来很乱：

template: 'Organizations: <select data-bind="options: organizationList, optionsText: "name", optionsValue: "id""></options>'
// Here ------------------------------------^ but then ------------------------------^

...所以data-bind 选项实际上只包含

data-bind="options: organizationList, optionsText: "

您需要转义那些嵌入的引号。可能最简单的方法是使用转义单曲：

template: 'Organizations: <select data-bind="options: organizationList, optionsText: \'name\', optionsValue: \'id\'"></options>'

【讨论】：