2

我对 Durandal 和 Knockout 很陌生，我遇到了一个问题，我不知道如何解决。

我有一张信用卡表格的视图。每行都有两个名为 Dimension1Key 和 Dimension2Key 的嵌套下拉列表 - 它们是从 GetDimensionMatrix ajax 调用中填充的。

creditlines foreach 填充在一个 for 循环中，其中两个下拉列表被定义为可观察的 - 并且 Dimension2 的数据被计算为 ko.compute。

表格和下拉列表最初使用选择的正确值正确填充 - 但嵌套无法正常工作。无论我更改哪个 Dimension1 下拉菜单，self的引用都是对表中的最后一行 - 因此使用最后一行的选定值中的值填充相应 Dimension1 的 Dimension2。如果再次更改 Dimension1 值，则不会发生任何事情 - 对计算函数的引用被破坏。但是，如果我更改最后一行的 Dimension1 的值，则先前更改的行 Dimension2 的值会更改 - 就好像该引用现在连接到最后一行一样。

我很确定问题是视图模型中的循环中的self - 以及它存在的上下文 - 但我无法理解解决方案。

有什么帮助吗？:-)

看法：

<section>
    <h2 data-bind="html:displayName"></h2>

    <table class="table">
        <tbody data-bind="foreach: creditCardLines">
            <tr>
                <td class="date" data-bind="text: Date"></td>
                <td class="date" data-bind="text: DocumentNo"></td>
                <td data-bind="text: Description"></td>
                <td><select data-bind="options: $parent.dimension1List, optionsText: 'DimensionValue', optionsValue: 'DimensionKey', value: Dimension1Key"></select></td>
                <td><select data-bind="options: dimension2List, optionsText: 'DimensionValue', optionsValue: 'DimensionKey', value: Dimension2Key"></select> </td>
                <td data-bind="text: Currency"></td>
                <td data-bind="text: CurrencyAmount"></td>
                <td data-bind="text: ExchangeRate"></td>
                <td data-bind="text: AmountLCY"></td>
                <td data-bind="text: Comment"></td>
                <td data-bind="text: ApprovedEmployee"></td>
                <td data-bind="text: Id"></td>
            </tr>
        </tbody>
    </table>
</section>

视图模型：

define(function (require) {

var submit = function () {
    this.displayName = 'Rejseafregning';

    this.creditCardLines = ko.observableArray();

    var me = this;

    this.activate = function () {
        return $.when(
                $.get('/submit/GetCreditCardLines'),
                $.get('/submit/GetDimensionMatrix')
                )
            .then(function (creditCardLines, dimension1List) {
                me.dimension1List = dimension1List[0].Data;

                for (var i = 0; i < creditCardLines[0].Data.length; i++) {
                    var self = creditCardLines[0].Data[i];

                    self.Dimension1Key = ko.observable(creditCardLines[0].Data[i].Dimension1Key);
                    self.Dimension2Key = ko.observable(creditCardLines[0].Data[i].Dimension2Key);


                    self.dimension2List = ko.computed(function () {
                        for (var j = 0; j < me.dimension1List.length; j++) {
                            if (me.dimension1List[j].DimensionKey === self.Dimension1Key()) {
                                return me.dimension1List[j].DimensionNext;
                            }
                        }
                    });

                    me.creditCardLines.push(self);
                }
            });
        };
    };
    return submit;
});
4

1 回答 1

2

创建 a 时，ko.computed您可以传入第二个参数，该参数控制this计算计算时的值。

当您创建dimension2List计算时，您可能希望将当前self输入作为第二个参数传递，然后this在方法中使用，例如：

            self.dimension2List = ko.computed(function () {
                for (var j = 0; j < me.dimension1List.length; j++) {
                    if (me.dimension1List[j].DimensionKey === this.Dimension1Key()) {
                        return me.dimension1List[j].DimensionNext;
                    }
                }
            }, self);

否则，根据闭包在 JS 中的工作方式，self重新计算计算的值最终将成为设置为（最后一行）的最后一个值。self

使用第二个参数computed确保该特定值将用作上下文。

于 2013-04-15T14:42:06.950 回答