关于javascript：淘汰组件选择选项


Knockout Components Select Options

我一直在扯头发，有人可以救我吗...

我想创建一个简单的基因剔除组件，该组件基于JSON对象呈现一个选择列表。
当我使用简单的字符串数组时，此方法有效，但是当我使用JSON对象(具有使用optionsText和optionsValue绑定的id和name属性)时，会得到一个带有[object object]的下拉列表。

任何帮助将不胜感激。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        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();
    });

行情看起来一团糟：

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

...因此data-bind选项实际上只包含

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

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

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