使用 Knockout 的带有下拉列表的复杂表

Question

我正在构建一个表单以允许用户更改数据库中已经存在的配置。

示例数据：

ProcessorColumnName OutboundColumnName  CatalogColumnId
Active              Active              2
Category            Category            3
Inventory           Inventory           4
Manufacturer        Manufacturer        5
ManufacturerSKU     ManufacturerSKU     6

淘汰模型：

function CatalogConfigurationModel(data) {
        var self = this;
        self.processorColumnName = ko.observable(data.ProcessorColumnName);
        self.outboundColumnName = ko.observable(data.OutboundColumnName);
        self.catalogColumnId = ko.observable(data.CatalogColumnId);
        self.currentlyConfigured = ko.observable(data.OutboundColumnName);
    }

这里的processorColumnName和currentConfigured作为键值对。

表：

<table class="table table-bordered table-striped">
                    <tbody data-bind="foreach: catalogConfiguration">
                        <tr class="h4">
                            <td data-bind="text: processorColumnName"></td>
                            <td><select data-bind="options: $root.catalogConfiguration,
                            optionsText: 'outboundColumnName',
                            optionValue: 'catalogColumnId',
                            value: currentlyConfigured"></select></td>
                        </tr>
                    </tbody>
                </table>

这样做的目的是构建一个处理器列列表，并提供一个下拉列表来为该列选择一个新值。我想让当前配置的值成为默认值，但我不确定如何从下拉列表中引用外部 foreach 值。当用户第一次加载页面时，OutboundColumnName 列应该是下拉菜单的默认值。

我将着手模拟一些数据以将小提琴放在一起。

无法让小提琴工作，因为我正在使用回调，所以我只想使用返回的字符串...这是链接，但我无法将变量放在顶部以映射到我的模型，这在我的程序中有效。 http://jsfiddle.net/LkqTU/15888/

Answer 1

2 个问题...

1.您在选择的绑定中有错字。它应该是 optionsValue，而不是 optionValue。

2.值绑定中使用的可观察对象应该有一个与“optionsValue”字段中存储的值相同的支持值。你的情况

self.catalogColumnId = ko.observable(data.CatalogColumnId);
self.currentlyConfigured = ko.observable(data.CatalogColumnId);