slickgrid + knockout을 사용하여 정렬 할 수 없습니다.

Question

녹아웃 모델을 만들고 맞춤 바인딩으로 slikgrid를로드 할 수있었습니다. JSFIddle에서이 예제를 따라했습니다. http://jsfiddle.net/joybroto/bwSmy/4/

하지만 열에 정렬을 추가 할 수 없습니다. slickgrid 문서를 통해 열에 sortable: true을 추가해야합니다. 나는 그것을했다. 또한

문서 (https://github.com/mleibman/SlickGrid/wiki/Getting-Started)가 분류하는 것은 달성해야한다고 말한다 "는 onSort 방법 들으면서"slickgrid와 녹아웃 사용자 정의 바인딩이 아직 방법을

slickgrid.onSort.subscribe(function(e, args){ // args: sort information. 
     var field = args.sortCol.field; 

     rows.sort(function(a, b){ 
      var result = 
       a[field] > b[field] ? 1 : 
       a[field] < b[field] ? -1 : 
       0; 

      return args.sortAsc ? result : -result; 
     }); 

     slickgrid.invalidate();   
    }); 

을 내가 100 %를 이해하지 않습니다. 그래서 녹아웃 부분을 사용하여 onSort를 구독하는 방법을 이해할 수 없습니다.

Answer 1

알겠습니다. 데이터 설정에 대한 참조는 별도로 유지해야하며 args 매개 변수 대신 정렬해야합니다.

여기에 많은 좋은 대답 (Updating SlickGrid with Knockoutjs via dependentObservable)과이 (https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-sort.html)의 도움으로 도움이됩니다.

var grid; 
var gridData; 
ko.bindingHandlers.slickGrid = { 
    init: function (element, valueAccessor) { 
     var settings = valueAccessor(); 
     gridData = ko.toJS(settings.data); // instead of ko.utils.unwrapObservable(settings.data) since within my ObservableArray there are Observables. 
     var columns = ko.utils.unwrapObservable(settings.columns); 
     var options = ko.utils.unwrapObservable(settings.options) || {}; 
     grid = new Slick.Grid(element, gridData, columns, options); 

     grid.onSort.subscribe(function (e, args) { 
      var cols = args.sortCols; 

      gridData.sort(function (dataRow1, dataRow2) { 
       for (var i = 0, l = cols.length; i < l; i++) { 
        var field = cols[i].sortCol.field; 
        var sign = cols[i].sortAsc ? 1 : -1; 
        var value1 = dataRow1[field], value2 = dataRow2[field]; 
        var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; 
        if (result != 0) { 
         return result; 
        } 
       } 
       return 0; 
      }); 
      grid.invalidate(); 
    }); 
}, 
    update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
     var settings = valueAccessor(); 
     gridData = ko.toJS(settings.data); //just for subscription 
     grid.setData(gridData, false); 
     grid.resizeCanvas(); // NB Very important for when a scrollbar appears 
     grid.render(); 
    } 

}; 

100 % 예쁜 것은 아니지만 작동합니다.