由于通过 AJAX 加载数据,我需要在数据到达时更新我的数据。
在页面加载时,我在数据库中收集项目。然后根据选择的项目(self.SelectedProject)加载任务和标签的数据。
self.Projects = ko.observableArray();
self.Tasks = ko.observableArray();
self.Tags = ko.observableArray();
self.SelectedProject = ko.observable(); // Chosen Project-object...
对于初始化,我为第一个项目加载数据:
self.SelectedProject(self.Projects()[0]); // Choose first returned Project...
然后我继续填充我的标签帮助数组:
ko.computed(function () {
// must be ko.computed as else will not update when data arrives for Tags and Tasks (which are likely to be empty at load time)...
// Empty projectAvailableTags before refill...
self.SelectedProject().projectAvailableTags([]);
// First populate current project's "projectAvailableTags"-array with values...
for (var j = 0, jlen = self.Tags().length; j < jlen; j++) {
self.SelectedProject().projectAvailableTags().push(self.Tags()[j].TagName());
}
for (var i = 0, ilen = self.Tasks().length; i < ilen; i++) {
//---- Populate each TaskTag-array with Tags...
for (var j = 0, jlen = self.Tags().length; j < jlen; j++) {
if (self.Tags()[j].TagTaskId() === self.Tasks()[i].TaskId) {
self.Task()[i].TaskTags.push(self.Tags()[j]);
// Populate the different tag-Arrays...
var tagtype = self.Tags()[j].TagType;
switch (tagtype()) {
case 0: self.Tasks()[i].Location().push(self.Tags()[j].TagName()); break;
case 1: self.Tasks()[i].Manager().push(self.Tags()[j].TagName()); break;
case 2: self.Tasks()[i].Employee().push(self.Tags()[j].TagName()); break;
}
}
}
};
});
这可能看起来很奇怪,也许我这样做是不必要的复杂。我使用 http://aehlke.github.com/tag-it/作为标签管理器,它只需要一个带有 TagNames 的数组。因此,我还没有弄清楚如何直接使用 Tags()-array,尽管我很喜欢。
任务以手风琴形式呈现,我希望将任务标签应用到内容面板中,而我将项目标签用作自动完成功能的标签源......
但是我无法弄清楚为什么我的标签被 ko.computed 应用了 2 次,而它们没有被应用,除非我重新选择没有它的项目。