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（new ProductDimensionsViewModel（））

正如您所见，我已设法填充过滤器并从ajax调用中提取产品。

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

如何根据左侧的复选框过滤产品
如何将分页功能链接到产品结果。

任何帮助都会受到赞赏，该网站可能只有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可观察对象。

希望这有帮助。

Knockout JS Paging和Facet Search

1 个答案: