jquery, 녹아웃을 사용한 클라이언트 측 필터링

Question

지난 24 개월 동안 서버에서 반환 된 레코드 목록이 있습니다. 사용자가 "지난 18 개월", "지난 12 개월"또는 "지난 24 개월"을 선택할 수있는 선택 메뉴가 있습니다.

기본값은 24 개월이므로 사용자가 처음 페이지를 방문하면 전체 목록이 서버에서 검색됩니다. 이제 포스트 백을 사용하지 않고 (서버 여행을 저장하지 않음), 사용자가 선택 메뉴에서 선택하는 내용에 따라 데이터를 필터링 할 수 있습니까?

jQuery 모바일 및 knockout.js와 함께 ASP.NET MVC4를 사용하고 있습니다. 보기 (HTML)에서

테이블 :

 <table style="width:100%;"> 

<tbody data-bind="foreach: TankMixRows"> 
    <tr> 
     <td data-bind="text: ProductName"></td> 
     <td data-bind="text: AI"></td> 
     <td></td> 
     <td data-bind="text: MOAHerbicide"></td> 
     <td data-bind="text: MOAInsecticide"></td> 
     <td data-bind="text: MOAFungicide"></td> 
    </tr> 
</tbody> 
    </table> 

자바 스크립트 :

function MOAViewModel() { 
var self = this; 

self.TankMixRows = ko.observableArray([]); 

self.getTankMixRows = function() { 
    $.ajax({ 
    type: "GET", 
    url: '@Url.Action("jsonModeOfAction", "WorkOrders")', 
    data: { 
     ID: '@Model.RecFieldId' 
    }, 
    success: function (data) { 
     self.TankMixRows(data); 
    } 
    }); 
} 

//Load initial state from server and populate viewmodel 
self.getTankMixRows(); 
    } 

    ko.applyBindings(new MOAViewModel()); 

Answer 1

은 첫째로 당신은 클라이언트 측 모델의 시간이 필요합니다. 일단 날짜 필터를 사용하려면 options이 필요합니다. 이것을 viewModel의 관측 가능 객체에 바인드합니다. 를 호출 할 수 있습니다 : 대신 filteredItems에

self.filteredItems = ko.computed(function() { 
    return ko.utils.arrayFilter(self.TankMixRows(), function(row) { 
     // Filter logic here; 
     // Return true if you want to keep the record 
     // Use row.date and self.filterDateSelection() 
     return true; 

    });  
} 

보기 바인딩 :

self.filterDateSelection = ko.observable(24); 

는 그런 다음 데이터를 필터링하는 계산 된 배열을 만들 수 있습니다.

MVC에서 기본 DateTime serialization이 당신과 싸울 가능성이 있습니다. 한 번 봐 가지고 : 나는 자바 스크립트 날짜 처리에 도움이 Moment.js을 사용했다 http://jsfiddle.net/mrfunnel/9eaMY/

: Converting .NET DateTime to JSON

---

업데이트

을 다음과 바이올린에서보세요.

월 필터에 대해 위에서 언급 한 옵션 바인딩을 사용하여 녹아웃 내에 논리를 유지하고 필터 범위 계산을 단순화 할 수 있습니다. 다음과 같이

// Possible options 
self.filterMonths = ko.observableArray([12, 18, 24]); 
// Selected option 
self.chosenFilter = ko.observable(24); 

이

은보기에 결합되어 다음과 같이

self.filterDate = ko.computed(function() { 
    var d = moment().subtract('months', self.chosenFilter()); 
    return d; 
}); 

filteredItems는 다음 계산 될 수있다 :

<p>Choose Month Filter: 
    <select data-bind="options: filterMonths, value: chosenFilter"></select> 
</p> 

지금 우리가 filterDate마다 chosenFilter 변화를 계산할 수 있습니다 :

self.filteredItems = ko.computed(function() { 
    return ko.utils.arrayFilter(self.tankMixRows(), function (row) { 
     // Filter logic here; 
     // Return true if you want to keep the record 
     return row.date > self.filterDate(); 
    }); 
});