impossibile ordinare usando slickgrid + knockout - javascript, jquery, knockout.js, slickgrid

Sono stato in grado di creare modelli knockout e caricare slikgrid con attacchi personalizzati. Stavo seguendo questo esempio in JSFIddle: http://jsfiddle.net/joybroto/bwSmy/4/

Ma non sono in grado di aggiungere l'ordinamento alle colonne. Dalla documentazione di slickgrid devo aggiungere sortable: true alle colonne. L'ho fatto.

Anche la documentazione (https://github.com/mleibman/SlickGrid/wiki/Getting-Started) afferma che l'ordinamento dovrebbe essere ottenuto "ascoltando il metodo onSort":

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();
});

Non capisco al 100% come siano ancora fatti i binding personalizzati knockout con slickgrid. Quindi non sono in grado di capire come iscriversi a onSort utilizzando la parte knockout.

risposte:

Capito. È necessario mantenere un riferimento alle impostazioni dei dati separatamente e ordinarle, invece di quelle all'interno del parametro args.

Quindi eccolo qui, con l'aiuto di molte buone risposte qui (Aggiornamento di SlickGrid con Knockoutjs tramite dipendenteObservable) e questo (https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-sort.html). È basato sull'ordinamento a più colonne:

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();
}

};

Non è carino al 100%, ma funziona.