녹아웃 JS 페이징 및 패싯 검색

Question

동시에 패싯 검색 및 페이징을 허용하는 단일 페이지 응용 프로그램을 구성하려고합니다. 나는 녹아웃에 상당히 새롭다. 그리고 나는 함께 연결된 2 개의 개념을 얻는 것을 고투하고있다.

개발 사이트 (새 ProductDimensionsViewModel()) 여기 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를 볼 수 있습니다

내가 필터를 채우고에서 제품을 당겨 관리해야 볼 수 있듯이 아약스 전화.

다음 안내가 필요합니다.

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에 바인딩 될 것인가?

희망이 도움이됩니다.