使用Knockout的下拉列表的复杂表格

时间:2014-04-09 21:14:49

标签: knockout.js

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

示例数据:

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>

这要做的是构建一个processorColumns列表并提供下拉列表以选择该列的新值。我想让当前配置的值为默认值,但我不确定如何从下拉列表中引用外部foreach值。当用户首次加载页面时,OutboundColumnName列应该是下拉列表的默认值。

我打算嘲笑一些数据,把它们放在一起。

因为我正在使用回调而无法上班,因此我想使用正在返回的刺痛...这里是链接,但我无法将变量放到顶部以映射到我的模型,这在我的程序中有效。 http://jsfiddle.net/LkqTU/15888/

1 个答案:

答案 0 :(得分:1)

2个问题......

1.你在选择的绑定中有拼写错误。它应该是optionsValue,而不是optionValue。

2.值绑定中使用的observable应该具有与&#34; optionsValue&#34;中存储的值相同的支持值。领域。在你的情况下

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