Durandal 中的多个 foreach答案

【问题标题】：Multiple foreach in DurandalDurandal 中的多个 foreach
【发布时间】：2013-04-03 06:22:08
【问题描述】：

我是 Durandal 的新手，现在已经玩了几个小时了。这似乎很有希望 - 但现在我遇到了一个问题，我无法弄清楚 - 并且无法通过 Google 找到解决方案。

我有一个包含三个数据表的视图 - creditCardLines、cashLines 和drivingReimbursementLines。它们从三个不同的数据源获取数据 - 用户可以向 cashLines 和drivingReimbursementLines 添加新行（省略表格）。

问题：在视图模型中，我可以轻松地将数据列表绑定到第一个 foreach - 但我不知道如何将数据绑定到第二个和第三个。

在激活函数中，我对我的服务器 API 进行 ajax 调用，以获取第一个 foreach 的数据 - 然后在完成后返回承诺。如何在这里获取第二个和第三个 foreach 的数据？

视图模型：

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

        this.creditCardLines = ko.observableArray();
        var me = this;

        this.activate = function () {
            return $.get('/submit/GetCreditCardLines').then(function (creditCardLines) {
                me.creditCardLines(creditCardLines.Data);
            });
        };
    };

    return submit;
});

查看：

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

    <h3>CreditCard lines</h3>
    <table class="table">
        <tbody data-bind="foreach: creditCardLines">
            <tr>
                <td class="date" data-bind="text: Date"></td>
                <td data-bind="text: Description"></td>
                <td data-bind="text: Amount"></td>
                <td><input type="checkbox" data-bind="checked: ApprovedEmployee" /></td>
            </tr>
        </tbody>
    </table>

    <h3>Cash lines</h3>
    <table class="table">
        <tbody data-bind="foreach: cashLines">
            <tr>
                <td class="date" data-bind="text: Date"></td>
                <td data-bind="text: Description"></td>
                <td data-bind="text: Amount"></td>
            </tr>
        </tbody>
    </table>
    <!-- TODO: Generate form to add new lines -->

    <h3>Driving reimbursement lines</h3>
    <table class="table">
        <tbody data-bind="foreach: drivingReimbursementLines">
            <tr>
                <td class="date" data-bind="text: Date"></td>
                <td data-bind="text: Description"></td>
                <td data-bind="text: Distance"></td>
                <td data-bind="text: Rate"></td>
                <td data-bind="text: Amount"></td>
            </tr>
        </tbody>
    </table>
    <!-- TODO: Generate form to add new lines -->

    <!-- Approve and save all lines as a quote with lines -->
    <input type="submit" value="Submit quote" />
</section>

【问题讨论】：

标签： data-binding knockout.js foreach durandal

【解决方案1】：

这就是我在视图模型中处理多个 jQuery 延迟调用的方式：

return $.when(
        $.get('/submit/GetCreditCardLines'),
        $.get('/submit/GetCashLines'),
        $.get('/submit/GetReimbursementLines'))
    .then(function (creditCardLines, cashLines, reimbursementLines)
    {
        processCreditCardLines(creditCardLines);
        processCashLines(cashLines);
        processReimbursementLines(reimbursementLines);
    })
    .fail(function (status)
    {
        // Do whatever you need to if it fails
    });

如果你不想要这些过程方法，你就不需要它们，但是如果你正在做任何复杂的事情，我认为拥有它们会更整洁。

【讨论】：

您能否设置它，使每个“进程”方法都使用then 链接到其对应的$.get - 而不是将它们组合成一个then？
你可以，但是如果你这样做，所有三个调用都会同时被触发，并且当所有三个调用都返回时它会处理 then，所以理论上它应该更快.实际上，我只是将代码更改为以这种方式执行，而不是链接请求！但是，是的，如果你愿意，你可以把它们锁起来。
我明白了。我的想法是像这样链接它：return $.when( $.get().then(), $.get().then(), $.get().then() ).fail(); 这应该允许每个调用独立于另一个调用（假设它们不相互依赖）。假设一个调用快速返回数据，但需要一段时间来处理 - 这样处理就可以在返回数据时立即进行。
如果您正在寻找更快的解决方案，那么我所说的就是，在大多数情况下，瓶颈将是通过网络获取您的数据。当您链接它们时，每个 Ajax 调用仅在最后一个调用完成时才开始。如上所述执行此操作会尽快启动所有调用（在您的浏览器允许的同时 http 连接数的限制内）。两者都试一下，看看哪一个对你来说在网络上更快。
谢谢 - 正是我需要的 :-)

【解决方案2】：

你应该看看 BreezeJS。它可以选择进行一次 Ajax 调用以提取多个查找。

查看 BreezeJS 文档以获得详细说明：http://www.breezejs.com/documentation/lookup-lists

【讨论】：