Knockout JS Paging and Facet Search

Question

我正在尝试将单个页面应用程序同时进行分面搜索和分页。我对Knockout相当陌生，而我正在努力将这两个概念联系在一起。

网站的发展可以在这里看到http://especial2.egcommerce.com/search

function ProductDimensionsViewModel() { 
    var self = this; 

    self.dimensions = ko.observableArray(); 

    //self.dimensions(data); 

    var baseUri = 'api/product_dimensions.php'; 
    $.getJSON(baseUri, self.dimensions); 

    //self.dimensions.subscribe(function(updated) { 
     // alert(updated); 
    // }); 

    self.filterByBrand = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "BRAND"; }) 
    }); 

    self.filterByArea = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "AREA"; }) 
    }); 

    self.filterByType = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "TYPE"; }) 
    }) 

    self.filterByBrandMenu = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "BRAND" && dimension.menuItem == "YES"}) 
    }); 

    self.filterByAreaMenu = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "AREA" && dimension.menuItem == "YES"}) 
    }); 

    self.filterByTypeMenu = ko.computed(function() { 
     return ko.utils.arrayFilter(self.dimensions(), function(dimension) { return dimension.type == "TYPE" && dimension.menuItem =="YES" }) 
    }); 



    self.products = ko.observableArray(); 
    $.getJSON("api/products", self.products); 
    //self.products(product) 

    //console.log(self.products(data.count)); 

    /* 
    * Paging functionality 
    */ 

    // only for example, used to demonstrate setting the total item count from a service call. 
    self.SetTotalResults = ko.observable(100); 

    // holds the total item count 
    self.TotalResults = ko.observable(); 

    // actual pager, used to bind to the pager's template 
    // first parameter must be an observable or function which returns the current 'total item count'. 
    // it is wrapped in a ko.computed inside the pager. 
    self.Pager = ko.pager(self.TotalResults); 

    // Subscribe to current page changes. 
    self.Pager().CurrentPage.subscribe(function() { 
     self.search(); 
    }); 

    self.search = function() { 
     // simulate a search 

     // ie.: 
     /* 
     var maximumRows = self.Pager().PageSize(), 
     searchText = self.SearchText(), 
     startIndex = (self.Pager().CurrentPage() - 1) * maximumRows; 
     myService.search(searchText, startIndex, maximumRows) 
     .done(function(result) { 
     // set your own results etc... 
     self.TotalResults(result.totalItemCount); 
     } 
     */ 

     // setting 'total results'. This should be in your result callback 
     // in this example we grab it from the form. 
     var totalItemCount = self.SetTotalResults(); 
     self.TotalResults(totalItemCount); 
    } 

ko.applyBindings（新ProductDimensionsViewModel（））

正如你可以看到我已经成功地填充的过滤器，并从产品拉阿贾克斯呼吁。

我现在需要一些指导以下内容。

1. 如何筛选基于复选框的产品左侧
2. 如何分页功能链接到产品的结果。

任何帮助将不胜感激，该网站只有可能有1500个产品，所以我认为我正在尝试实施的解决方案将使导航产品非常光滑。

感谢所有帮助 罗布

Answer 1

这是一个有点挑战性，而无需编写所有的代码解释，但希望这些增加是有道理的：

self.page = ko.observable(0) 
self.pageSize = ko.observable(20) 

self.filters = [ 
    { id: 'dining', label: 'Fine Dining', active: ko.observable(false) }, 
    { id: 'events', label: 'Hospitality and Events', active: ko.observable(false) }, 
    { id: 'restaurants', label: 'Restaurant', active: ko.observable(false) } 
    // etc... 
] 

self.activeFilters = ko.computed(function() { 
    return self.filters.filter(function(filter) { 
    return filter.active(); 
    }) 
}) 
self.activeFilters.subscribe(function() { 
    // Make ajax call based on activeFilters, and start and pageSize as params 
}) 


<ul data-bind="foreach: filters"> 
    <li> 
    <input type="checkbox" data-bind="checked: active"> 
    <label data-bind="text: label"></label> 
    </li> 
</ul> 

分页标记这里没有显示，但将根据您想要控制它的方式绑定到self.page和self.pageSize observables。

希望这会有所帮助。