我在淘汰视图模型中有一个 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 中包含 observable,但我遇到了从 viewModel 获取引用并遍历数组的问题。