我在剔除viewModel中有一个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>


和以下viewModel:

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的反馈,我已更新为在ProjectPeriod中包括了Observable,但是我遇到了从viewModel获取引用并遍历数组的问题。

最佳答案

有两种方法可以解决此问题,我可能要做的就是将计算出的属性移到ProjectPeriod对象本身,并为ProjectPeriod提供对父级ProjectPeriodViewModel的引用,即ProjectPeriod将能够访问ProjectPeriods并向后计数,将之前的所有期间加起来(为每个期间赋予一个索引属性以简化此过程可能是一个主意)。

10-06 04:14