화살표가있는 녹아웃 JS의 표 정렬

Question

KnockoutJS를 사용하여 정렬 가능한 표를 만들고 있습니다. 테이블은 정상적으로 작동하지만 사용자가 특정 헤더를 클릭 할 때 열 머리글 옆에 위쪽 화살표가 나타나게하고 싶습니다. 다시 클릭하고 위쪽 화살표가 아래를 향해야합니다. 먼저 화살표가 "Age"열을 향해야합니다.

지금은 화살표가 표시되지 않습니다. 내 코드에서이 문제의 원인은 무엇입니까?

HTML :

<table> 
<thead> 
<tr data-bind="foreach: headers"> 
<td data-bind="click: $parent.sort, text: title"> 
    <span data-bind="if: arrowDown"> v </span> 
    <span data-bind="if: arrowUp">^</span> 
</td> 
</tr> 
</thead> 

넉 아웃 : 관찰 헤더 항목에 대한

var viewModel = function(){ 
    var self = this; 
    self.people = ko.observableArray([ 
     {firstName:'James',lastName:'Smith',age:38}, 
     {firstName:'Susan',lastName:'Smith',age:36}, 
     {firstName:'Jeremy',lastName:'Smith',age:10}, 
     {firstName:'Megan',lastName:'Smith',age:7}, 
     {firstName:'James',lastName:'Jones',age:40}, 
     {firstName:'Martha',lastName:'Jones',age:36}, 
     {firstName:'Peggy',lastName:'Jones',age:10} 
    ]); 
    self.headers = [ 
     {title:'First Name',sortPropertyName:'firstName', asc:true, arrowDown: false, arrowUp: false}, 
     {title:'Last Name',sortPropertyName:'lastName', asc:true, arrowDown: false, arrowUp: false}, 
     {title:'Age',sortPropertyName:'age', asc:true, arrowDown: false, arrowUp: true} 
    ]; 

    self.activeSort = self.headers[2]; 

    self.sort = function(header, event){ 
     if(self.activeSort === header) { 
     header.asc = !header.asc; 
     header.arrowDown = !header.arrowDown; 
     header.arrowUp = !header.arrowUp; 
     } else { 
     self.activeSort.arrowDown = false; 
     self.activeSort.arrowUp = false; 
     self.activeSort = header; 
     header.arrowDown = true; 
     } 
     var prop = header.sortPropertyName; 
     var ascSort = function(a,b){return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; }; 
     var descSort = function(a,b){return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; }; 
     var sortFunc = header.asc ? ascSort : descSort; 
     self.people.sort(sortFunc); 
    }; 
}; 

ko.applyBindings(new viewModel()); 

Answer 1

가 확인하여 정렬 속성, 당신은 일반 자바 스크립트 값을 변경하는 경우 UI를 업데이트하지 않습니다 녹아웃.

즉

self.headers = [ { 
    title: 'First Name', 
    sortPropertyName: 'firstName', 
    asc: ko.observable(true), 
    arrowDown: ko.observable(false), 
    arrowUp: ko.observable(false) 
}, ... ]; 

지금 UI를 업데이트합니다 정렬 기능 녹아웃에서이 설정합니다.

Answer 2

Datatables.net 플러그인을 사용하면 모든 번거 로움을 덜어줍니다.