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。

希望這會有所幫助。