javascript - Backbone.Collection的KnockBack ViewModel似乎没有创建kb.CollectionObservable

采取以下代码：

var model = new Backbone.Model({
    items: new Backbone.Collection([
        new Backbone.Model({ ID: 1 }),
        new Backbone.Model({ ID: 2 })
    ])
});

var vm = new kb.ViewModel(model)

基于KnockBack API所说的（即：http://kmalakoff.github.io/knockback/tutorial_kb_view_model.html），我希望'vm.items'是kb.CollectionObservable。

但是，当我尝试使用kb.CollectionObservable函数“ filter”和“ comparator”将排序和过滤函数的属性归属于集合时，这些函数是未定义的。

vm.items.filters
= undefined

通常，这些函数可以通过viewModel构造函数选项指定，但在我的情况下，这些项将作为较大的关系模型的一部分（当前使用工厂创建子viewModels）而被拉下，所以我不能那样做。

我已经确认，从头开始创建新的kb.collectionObservable会揭示这些功能，即：

var collection = new kb.collectionObservable(new Backbone.Collection([
    new Backbone.Model({ ID: 1 }),
    new Backbone.Model({ ID: 2 })
]))

collection.filters
= function()

任何帮助将非常感激。

最佳答案

因此，最终结果是尝试将所有内容转换为kb.collectionObservable是错误的方法。更好的解决方案是创建一个辅助的ko.compute结果，然后执行我需要的所有过滤和排序。

var model = new Backbone.Model({
    items: new Backbone.Collection([
        new Backbone.Model({ ID: 1 }),
        new Backbone.Model({ ID: 2 })
    ])
});

var vm = new kb.ViewModel(model);
vm.Sort() = ko.observable("asc");
vm.SortBy() = ko.observable("ID");
vm.Page() = ko.observable(1);
vm.Filters() = ko.observableArray([]);
vm.PageSize() = ko.observable(20);

vm.Filtered = ko.computed(function () {
    var items = vm.items;

    // Sorting
    items = items.sort(function (first, second) {
        var sortby = vm.SortBy();
        if (first[sortby]() == second[sortby]()) return 0;
        if (vm.Sort() == "asc") {
            return first[sortby]() < second[sortby]() ? -1 : 1;
        }
        if (vm.Sort() == "desc") {
            return first[sortby]() > second[sortby]() ? -1 : 1;
        }
        return 0;
    });

    // Filter
    items = ko.utils.arrayFilter(items, function (vm) {
        var filter = true;
        $.each(vm.Filters(), function (i, filtr) {
            var json = JSON.stringify(vm.model().attributes).toLowerCase();
            if (json.indexOf(filtr.toLowerCase()) < 0) filter = false;
        });
        return filter;
    });

    // Paging
    var startIndex = (vm.Page() - 1) * vm.PageSize();
    var endIndex = vm.Page() * vm.PageSize();
    items = items.slice(startIndex, endIndex);

    return items;
});

另外，您可能还需要在模型本身上设置排序，以便以正确的顺序添加新项目：

var setModelComparator = function () {
    vm.model().get("items").comparator = function (a, b) {
        var by = vm.Sort() == "asc" ? 1 : -1;
        var field = vm.SortBy();
        if (a.get(field) == 0) return -1 * by;
        if (b.get(field) == 0) return 1 * by;
        if (a.get(field) < b.get(field)) return 1 * by;
        if (a.get(field) > b.get(field)) return -1 * by;
        return 0;
    };
};

也许这只是Knockback尚在开发中而未更新API文档的一种情况。

也要感谢bvoleti指出Nested Models的使用，这是击退库中非常重要的部分，尤其是与Backbone.Relational联手时。

关于javascript - Backbone.Collection的KnockBack ViewModel似乎没有创建kb.CollectionObservable，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17194093/