在 knout.js 中遍历 observablearray 时，如何检索 foreach 的 ko.computed 运行总和

Posted 2023-03-10

【中文标题】在 knout.js 中遍历 observablearray 时，如何检索 foreach 的 ko.computed 运行总和

【英文标题】：How can I retrieve ko.computed running sum of foreach when iterating through observablearray in knockout.js

【发布时间】：2012-11-19 21:39:57

【问题描述】：

我在淘汰视图模型中有一个 ProjectPeriod 项目列表作为 observableArray，其中包括每个时期的月数。我想显示 foreach 中每一行的结束日期。目前，我在 viewModel 中使用 ko.computed 值，但我无法遍历每个项目直到显示的项目。如何循环并总结仅显示到 foreach 中当前项目的值？

目前我有以下 html：

<table>
    <tr class="tableHeader">
        <th>Period</th>
        <th>Number of Months</th>
        <th>End of Period</th>
    </tr>
    <tbody data-bind="foreach: ProjectPeriod">
        <tr>
            <td><input data-bind="value: ProjectYearText" /></td>
            <td><input data-bind="value: PeriodMonths" /></td>
            <td data-bind="text: endDate"></td>
        </tr>
    </tbody>
</table>

以及以下视图模型：

function ProjectPeriod(projectYearId, projectYearText, periodMonths, viewModel) 
    var self = this;
        self.ProjectYearId = projectYearId;
        self.ProjectYearText = ko.observable(projectYearText);
        self.PeriodMonths = ko.observable(periodMonths);
        self.viewModel = viewModel;

        self.endDate = ko.computed(function () 
            var startDate = hfProjectDates.Get("ProjectStartDate");

            // Calculate the number of months from the beginning to the current period.
            var monthCount = 0;
            ko.utils.arrayForEach(self.viewModel.ProjectPeriods(), function (projectPeriod) 
                if (projectPeriod.ProjectYearId < self.ProjectYearId)
                    monthCount += projectPeriod.PeriodMonths;
                );

            var endDate = moment(startDate).add('M', monthCount);
            return endDate ? endDate.format("M/DD/YYYY") : "None";
        );
    

    function ProjectPeriodViewModel() 
        // Data
        var self = this;

        self.ProjectPeriods = ko.observableArray([
            new ProjectPeriod(1, "1st Year", 12, ProjectPeriodViewModel),
            new ProjectPeriod(2, "2nd Year", 12, ProjectPeriodViewModel),
            new ProjectPeriod(3, "3rd Year", 12, ProjectPeriodViewModel)
        ]);

    

我真的才刚刚开始使用 Knockout，所以我预计我处理此问题的方式会有很多问题。但具体来说，我需要显示运行结束日期。

更新：基于 Matt;s 的反馈，我已更新以在 ProjectPeriod 中包含可观察对象，但我在从 viewModel 获取引用和迭代数组时遇到了问题。 p>

【问题讨论】：

不确定你想要什么。你想在每行的末尾累积月数吗？那么第一行是 12 个月，第二行是 24 个月，以此类推？

是的，基本上这就是我所需要的。在输入框中输入月份。我需要每一行显示结束日期。因此，第 1 行可能有 5 个月，periodEndDate 将是 startdate + 5 个月，第 2 行输入了 12 个月， periodEndDate 将是 startdate + 17 个月。

【参考方案1】：

有几种方法可以解决这个问题，我可能会做的是将计算属性移动到 ProjectPeriod 对象本身，并为 ProjectPeriod 提供对父 ProjectPeriodViewModel 的引用，这样， ProjectPeriod 将能够访问 ProjectPeriods 并将其之前的所有周期倒数相加（为每个周期提供一个索引属性以使其更简单可能是一个想法）。

【讨论】：

我也开始走这条路了。我已经有一个可以枚举的 ID，但一直停留在如何添加对 ProjectPeriodViewModel 的引用。你有这个看起来如何的例子吗？

@tlbignerd：我认为您根据上次编辑获得了它。我只是将ProjectPeriodViewModel 作为参数传递给构造函数。你的问题可能在这里ko.utils.arrayForEach(viewModel.ProjectPeriods()... 不应该是self.viewModel.ProjectPeriods()？

我以为我也很接近了。我放入了self.viewModel，并在构造函数中传递了ProjectPeriodVewModel（最初我使用self作为参数）。当我运行它时，我收到错误：对象不支持属性或方法'ProjectPeriods'