0

ファセット検索とページングを同時に実行できる単一ページ アプリケーションをまとめようとしています。私は Knockout にかなり慣れていないので、2 つの概念を結び付けるのに苦労しています。

開発サイトはこちら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())

ご覧のとおり、フィルターを設定し、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 に答える