我在剔除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
并向后计数,将之前的所有期间加起来(为每个期间赋予一个索引属性以简化此过程可能是一个主意)。