我目前正在使用Knockback.js创建一个页面,该页面在表中显示员工的任务。我有一个任务的视图模型,它包含一个名为isSelected的布尔可观察对象。员工的视图模型包含称为"tasks"的任务视图模型集合的可观察集合。
我现在想添加一个名为"selectedTasks"的属性/函数/可观察对象,它只公开选定的任务。我想满足以下要求:
- "tasks"one_answers"selectedTasks"都应该为我提供视图模型,而不是模型
- 当我将模型添加到原始任务集合中时,可观察到的"任务"应该得到更新。
- 当用户选择这个新添加的模型时,"selectedTasks"也应该得到更新
- 每个任务模型应该只有一个视图模型。否则,我可能会得到一个视图模型,它表示没有选择任务x,而另一个视图模式则表示选择了x
为了更清楚地演示它,我创建了这个jsfiddle:http://jsfiddle.net/drojoke/cg6d88Lp/14/
到目前为止,我只使用了一个可观察的集合,使"tasks"属性的所有内容都正常工作,如下所示:
this.tasks = kb.collectionObservable(tasks, {
view_model: function (task) {
return new TaskViewModel(task);
}
});
我使用view_model
选项将tasks集合中的每个任务都转换为TaskViewModel
。当我将新任务添加到tasks集合时,CollectionObservable
会更新为expected。
我尝试创建一个selectedTasks
属性作为带有筛选选项的CollectionObservable
,如下所示:
this.selectedTasks = kb.collectionObservable(tasks, {
view_model: function (task) {
return new TaskViewModel(task);
}, filters: function (task) {
return task.isSelected(); // isSelected is undefined.
}
});
但不幸的是,传递给filter函数的对象不是TaskViewModel
,而只是一个任务对象,因此我无法访问isSelected
observable。
我找不到太多关于过滤视图模型集合而不是模型的信息。我如何创建一个selectedTasks observable,过滤视图模型而不创建其他视图模型?
您可以简单地使用计算的可观察性:
this.selectedTasks = ko.computed(function() {
return this.tasks().filter(function(task) {
return task.isSelected();
});
}, this);