过滤knockout.js组件列表

Question

我试图找到最多的＆＃34;淘汰赛＃34;这样做的方式。

我有一个通过GET请求获取的文件列表，并在我的模板视图模型中填充到一个数组中。我遍历模板中的那些并为每个项目创建<partial-li-file>。

我试图从搜索框中过滤文件。我能够在之前的迭代中执行此操作，其中PartialLiFile个对象保存在数组中，但现在它只是一个对象列表。

我不知道在哪里或如何访问PartialLiFile个对象来过滤它们。

甚至可以这样做，就像我在这里实现它一样吗？

模板

<ul data-bind="foreach:files">
    <partial-li-file params="{fil:$data}" data-bind="visible:!filtered()"></partial-li-file>
</ul>

主ViewModel

self.search = ko.observable();

self.search.subscribe(function(text) {
    // TODO: Need to filter the files here
});

// Fetch the file data
self.files = ko.observableArray();
$.getJSON("get/files/", function(data) {
    data.map(function(fil) {
        self.files.push(fil);
    });
});

部分ViewModel

function PartialLiFile(params) {
    var self = this;
    ko.mapping.fromJS(params.fil, {}, self);

    // TODO: need to set this to true if the name matches the search string
    self.filtered = ko.observable(false);
}

Answer 1

经过一些试验和错误，我已经找到了答案。我将父的搜索observable $parent.search添加到传递给组件的参数列表中，并在partial的视图模型中订阅了它。我没有意识到有可能以这种方式分享一个观察点。

模板

<ul data-bind="foreach:files">
    <partial-li-file params="{fil:$data,search:$parent.search}" data-bind="visible:!filtered()"></partial-li-file>
</ul>

部分ViewModel

function PartialLiFile(params) {
    var self = this;
    ko.mapping.fromJS(params.fil, {}, self);

    self.search = params.search;

    self.search.subscribe(function(search) {
        self.filtered(self.name().search(new RegExp(search, "i")) == -1);
    });

    self.filtered = ko.observable(false);
}