0

我正在尝试组合一个单页应用程序，该应用程序允许同时进行多面搜索和分页。我对 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 调用中提取产品。

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

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

任何帮助将不胜感激，该网站可能只有 1500 种产品，所以我认为我试图实施的解决方案将使产品导航非常流畅。

感谢您的帮助

4

1 回答 1

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 可观察对象，具体取决于您希望如何控制它。

希望这可以帮助。

于 2013-01-20T16:49:32.813 回答