Aggiornamento SlickGrid con Knockoutjs via dependentObservable

Question

sto usando SlickGrid con knockout.js sull'esempio http://jsfiddle.net/rniemeyer/A9NrP/

ho il popolamento della griglia e il pulsante ADD di lavoro come per l'esempio. Il problema che sto avendo è quando aggiorno la proprietà delle righe del mio viewmodel via ko.dependentObservable la sezione 'update' di ko.bindingHandlers viene attivata ma la griglia slick non rileva le modifiche.

html che definisce il legame:

<div id="grid" data-bind="slickGrid: { data: rows, columns: columns }"></div> 

codice SlickGrid (stesso come esempio):

var grid; 
ko.bindingHandlers.slickGrid = { 
    init: function (element, valueAccessor) { 
     var settings = valueAccessor(); 
     var data = ko.utils.unwrapObservable(settings.data); 
     var columns = ko.utils.unwrapObservable(settings.columns); 
     var options = ko.utils.unwrapObservable(settings.options) || {}; 
     grid = new Slick.Grid(element, data, columns, options); 
    }, 
    update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
     var settings = valueAccessor(); 
     // I can see the correct data here but the grid does not update 
     var data = ko.utils.unwrapObservable(settings.data); 
     grid.render(); 
    } 
} 

mio modello:

myViewModel = { 
data : ko.observableArray(), 
tabs: ['High', 'Medium', 'Low'], 
rows : ko.observableArray([]), 
columns : [ 
     { 
      id: "id", 
      name: "ID", 
      field: "id" 
     }, 
     { 
      id: "Location", 
      name: "Location", 
      field: "Location" 
     }, 
     { 
      id: "Comment", 
      name: "Comment", 
      field: "Comment" 
     } 
     ], 
addItem: function() { // this works and SlickGrid adds a new row 
    this.rows.push(new ModelRow(0, "New", 5.00)); 
}, 

}

Il codice che rendono l'ajax c tutti, e gli incendi ko.bindingHandlers.slickGrid.update ma pretende molto slickgrid sembrano rendere effettive le modifiche, l'Ajax fa restituire i dati validi, e viene attivato quando l'utente fa clic su un link:

ko.dependentObservable(function() { 
    if (this.data.lastAlarmRequest) this.data.lastAlarmRequest.abort(); 
     this.data.lastAlarmRequest = $.get("/audit/alarmsdata/high", null, this.rows); 
}, i2owater.viewmodels.AlarmsForViewModel); 

Perché l'addItem la funzione funziona ma non il ko.bindingHandlers.slickGrid.update? Nella funzione di aggiornamento posso vedere i dati corretti a cui la griglia deve essere associata. È perché tutti i dati nelle proprietà delle righe vengono sovrascritti?

UPDATE: Ho provato a utilizzare grid.invalidate(); ma pretende molto lavoro e hanno anche visto che la funzione addItem smette di funzionare una volta ko.dependentObservable viene eseguito

Answer 1

Ho appena avuto lo stesso problema e hanno trovato la soluzione, modificare il codice di aggiornamento al seguente:

update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
     var settings = valueAccessor(); 
     // I can see the correct data here but the grid does not update 
     var data = ko.utils.unwrapObservable(settings.data); 
     grid.setData(data,true) 
     grid.render(); 
    } 

A proposito, il parametro true in setData indica se si desidera che la griglia torni all'inizio o no.

Answer 2

Ho aggiornato jsfiddle molto utile di rniemeyer per correggere un bug della barra di scorrimento. Nell'originale, prova ad aggiungere 20 righe, quindi utilizza la barra di scorrimento verticale e vedrai un problema di interfaccia utente. Il problema è che lo scrollpane calcola erroneamente la dimensione della vista, quindi la scrollbar agita.

Qui una versione aggiornata.

EDIT: Knockout e slickgrid sono state aggiornate in modo da ho aggiornato il violino: EDIT: E ancora:

http://jsfiddle.net/5ddNM/79/

notare quanto segue:

grid.resizeCanvas(); 

Answer 3

Nel mio caso ho era necessario utilizzare slickgrid e knockout con un altro viewmodels associato a diversi controlli. Ho usato come esempio http://jsfiddle.net/hlascelles/5ddNM/ e ho sistemato alcune cose lì. Usa http://jsfiddle.net/Schnapz/z4YLD/2/ o guarda la descrizione qui sotto.

Dichiarazione di griglia, articolo e modulo di visualizzazione è possibile lasciare come scritto nell'esempio.Ma, vincolante dovrebbe essere comune a tutti i modelli tra cui ViewModel per sé (lo chiamano in Pageload altrimenti):

ko.applyBindings(); 

E addItem dovrebbe assomigliare a questa:

addItem: function() { 
    viewModel.items.push(new Item(0, "New", 5.00)); 
}, 

Perché l'utilizzo di 'questo' non lo farà lavoro qui.

Poi, legante personalizzato dovrebbe essere simile a questo (gettone da un altro esempio da qualche parte):

ko.bindingHandlers.slickGrid = { 
init: function (element, valueAccessor) { 
    var settings = valueAccessor(); 
    var data = ko.utils.unwrapObservable(settings.data); 
    var columns = ko.utils.unwrapObservable(settings.columns); 
    var options = ko.utils.unwrapObservable(settings.options) || {}; 
    grid = new Slick.Grid(element, data, columns, options); 
}, 
update: function (element, valueAccessor, allBindingAccessor, viewModel) { 
    var settings = valueAccessor(); 
    var data = ko.utils.unwrapObservable(settings.data); //just for subscription 
    grid.setData(data, true); 
    grid.resizeCanvas(); // NB Very important for when a scrollbar appears 
    grid.render(); 
} 

}

Inoltre, ho avuto un problema che sono stati aggiunti elementi, ma non ho potuto visto la risultato. Dopo fonti di qualche slickgrid ricerca ho trovato questa soluzione:

<div id="grid" class="grid-canvas" data-bind="slickGrid: { 
                 data: viewModel.items, 
                 columns: viewModel.columns, 
                 options: { 
                    enableColumnReorder: false, 
                    rowHeight: 20, 
                    enableAddRow: true, 
                    autoHeight: true 
                   } }"></div> 
<a href="#" class="btn-link" data-bind="click: viewModel.addItem">Add Item</a> 

Perché in qualche modo di default grid-viewport avevano 0px altezza :) Appena aggiunto alcune opzioni durante il collegamento.