Aktualizacja SlickGrid z Knockoutjs poprzez dependentObservable

Question

Używam SlickGrid z knockout.js na przykładzie http://jsfiddle.net/rniemeyer/A9NrP/

mam zaludnianie siatki i przycisk ADD Praca jak na przykład. Problem, który mam jest, gdy aktualizuję właściwość wierszy mojego viewmodel poprzez ko.dependentObservable sekcja "update" ko.bindingHandlers jest uruchamiana, ale zręczna siatka nie pobiera zmian.

HTML określa wiązania:

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

kod SlickGrid (taki sam jak w przykładzie)

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

my Model

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

}

Kod które sprawiają, że ajax c wszystkich, a pożary ko.bindingHandlers.slickGrid.update ale slickgrid robi wydaje się podnieść zmiany, Ajax ma powrotu prawidłowych danych i jest zwolniony, gdy użytkownik kliknie na 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); 

Dlaczego addItem funkcja działa, ale nie ko.bindingHandlers.slickGrid.update? W funkcji aktualizacji mogę zobaczyć poprawne dane, do których sieć powinna być związana. Czy to dlatego, że wszystkie dane w właściwościach wierszy są nadpisywane?

AKTUALIZACJA: Próbowałem użyć grid.invalidate(); ale nie robi praca i widziałem też, że funkcja addItem przestaje działać po ko.dependentObservable jest wykonywany

Answer 1

prostu miałem ten sam problem i znaleźli rozwiązanie, zmienić swój kod aktualizacji do następujących:

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

Przy okazji, prawdziwy parametr w setData wskazuje, czy chcesz, aby kratka przewijała się z powrotem na górę, czy nie.

Answer 2

Zaktualizowałem bardzo przydatne jsfiddle rniemeyera, aby naprawić błąd paska przewijania. W oryginale spróbuj dodać 20 wierszy, a następnie użyj pionowego paska przewijania, a zobaczysz problem z interfejsem. Problem polega na tym, że scrollpane niepoprawnie oblicza rozmiar widoku, więc pasek przewija się.

Tutaj zaktualizowana wersja.

EDIT: Knockout i slickgrid zostały zaktualizowane tak mam aktualizowane na skrzypcach: EDIT: I znowu:

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

Uwaga następujące:

grid.resizeCanvas(); 

Answer 3

W moim przypadku potrzebne do użycia slickgrid i nokaut z innymi modelami wizji powiązanymi z różnymi kontrolkami. Użyłem http://jsfiddle.net/hlascelles/5ddNM/ jako przykładu i naprawiłem tam kilka rzeczy. Użyj http://jsfiddle.net/Schnapz/z4YLD/2/ lub spójrz na poniższy opis.

Deklaracja siatki, elementu i widoku Modelu można opuścić w sposób opisany w przykładzie.Ale wiążące powinny być wspólne dla wszystkich modeli, w tym samym ViewModel (nazywamy go w pageload lub innego):

ko.applyBindings(); 

I addItem powinna wyglądać następująco:

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

Ponieważ za pomocą „to” nie będzie pracuje tutaj.

Następnie niestandardowy spoiwem powinien wyglądać następująco (token z innym przykładzie gdzieś):

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

}

Również miałem problem, że elementy zostały dodane, ale nie mogłem widział wynik. Po źródeł rozeznanie slickgrid za Znalazłem rozwiązanie:

<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> 

Bo jakoś domyślnie siatki-rzutni miał 0px wysokość :) Wystarczy dodano kilka opcji podczas wiązania.