使用Knockback.js过滤中的视图模型集合

Filtering a collection of view models in using Knockback.js

本文关键字：视图 模型 集合 Knockback js 过滤 使用      更新时间：2023-09-26

我目前正在使用Knockback.js创建一个页面，该页面在表中显示员工的任务。我有一个任务的视图模型，它包含一个名为isSelected的布尔可观察对象。员工的视图模型包含称为"tasks"的任务视图模型集合的可观察集合。

我现在想添加一个名为"selectedTasks"的属性/函数/可观察对象，它只公开选定的任务。我想满足以下要求：

  • "tasks"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);
相关文章：