javascript - 淘汰赛组件选择选项

Question

头发都掉光了，求大神救救我

我想创建一个简单的剔除组件，它基于 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();
    });

Answer 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>'