Jak mogę zintegrować SlickGrid z reaktywnymi kolekcjami Meteor.js?

Question

SlickGrid skupia się na wyświetlaniu danych z tabeli lub tablicy, co jest świetne. Meteor skupia się na manipulowaniu danymi, ale używa Minimongo. W jaki sposób SlickGrid może zintegrować się z kolekcjami Minimonogo i zachować szybki wyświetlacz i duże możliwości obsługi danych?

Mój obecny sposób robienia tego czuje się źle i jest nieco brzydki. Mam osobną tablicę dla SlickGrid i pisanie kodu klej do obsługi zdarzeń Aktualizacja:

• Sortowanie: obsługiwane przez Meteor, wywołuje pełne odświeżanie (ponowne ustawienie danych)
• add/aktualizacji/usunięcia: zastanawianie się indeks i unieważniania jej
• Filtering: obsługiwane przez Meteor, wywołuje pełne odświeżanie (dane ponownego ustawienia)

Jak bym powiązać dane kursor Meteor bezpośrednio do SlickGrid i obsługiwać tylko zdarzenia z kodem kleju? Czy można użyć Slick.dataview? Celem jest obsługa aktualizacji na poziomie komórki.

Answer 1

Używanie Slick.Dataview powielałoby tylko niektóre funkcje (sortowanie, filtrowanie, CRUD ..) swoich zbiorów, ale powinieneś to sprawdzić, aby zobaczyć, jak współdziała z Slick.Grid.

Jeśli spojrzeć na kod Slick.Grid widać, że jest to tylko 3 funkcje DataView .getLength(), .getItem() i .getItemMetadata() i ostatni nie jest obowiązkowe do wdrożenia. So Slick.Grid jest w zasadzie komponentem "Widok" tylko czytanie "Dane" (Dataview), ale gdzie jest "kontroler"?

Dobrze jesteś jej wdrożenia i rzeczywiście można znaleźć jeden przykład w „SlickGrid Example 4”.

Najważniejszą częścią tego przykładu jest w tym fragmencie:

// wire up model events to drive the grid 
    dataView.onRowCountChanged.subscribe(function (e, args) { 
    grid.updateRowCount(); 
    grid.render(); 
    }); 

    dataView.onRowsChanged.subscribe(function (e, args) { 
    grid.invalidateRows(args.rows); 
    grid.render(); 
    }); 

tego 2 wydarzeń (onRowCountChanged, onRowsChanged) dostanie wystrzelonych podczas dodawania, usuwania aktualizacji wierszy w DataView i korzystania funkcjonuje jesteś przejazdem informacje do siatki.

Zatem podstawową ideą jest, aby zrobić to samo dla swojej Mongo.Collection iw miarę widzę Mongo.Cursor ma .observeChanges() który jest nieco podobny do .onRowsChanged

Zamówienie SlickGrid API w źródle na końcu dokumentu.

obsługiwać Siatka aktualizuje skutecznie próbować za pomocą różnych metod Unieważnienie .invalidate (ALL) row (s)() a także .updateRow() i .updateCell() nawet bardziej precyzyjną kontrolę.

Są to głównie metody obsługujące przejrzeć aktualizacje:

"render": render, 
    "invalidate": invalidate, 
    "invalidateRow": invalidateRow, 
    "invalidateRows": invalidateRows, 
    "invalidateAllRows": invalidateAllRows, 
    "updateCell": updateCell, 
    "updateRow": updateRow, 
    "getViewport": getVisibleRange, 
    "getRenderedRange": getRenderedRange, 
    "resizeCanvas": resizeCanvas, 
    "updateRowCount": updateRowCount, 
    "scrollRowIntoView": scrollRowIntoView, 
    "scrollRowToTop": scrollRowToTop, 
    "scrollCellIntoView": scrollCellIntoView, 
    "getCanvasNode": getCanvasNode, 
    "focus": setFocus, 

Jeśli potrzebujesz interakcji użytkownika z wami Siatka subskrypcji zdarzeń i aktualizować swoją kolekcję odpowiednio.

"onScroll": new Slick.Event(), 
    "onSort": new Slick.Event(), 
    "onHeaderMouseEnter": new Slick.Event(), 
    "onHeaderMouseLeave": new Slick.Event(), 
    "onHeaderContextMenu": new Slick.Event(), 
    "onHeaderClick": new Slick.Event(), 
    "onMouseEnter": new Slick.Event(), 
    "onMouseLeave": new Slick.Event(), 
    "onClick": new Slick.Event(), 
    "onDblClick": new Slick.Event(), 
    "onContextMenu": new Slick.Event(), 
    "onKeyDown": new Slick.Event(), 
    "onAddNewRow": new Slick.Event(), 
    "onValidationError": new Slick.Event(), 
    "onViewportChanged": new Slick.Event(), 
    "onColumnsReordered": new Slick.Event(), 
    "onColumnsResized": new Slick.Event(), 
    "onCellChange": new Slick.Event(), 
    "onActiveCellChanged": new Slick.Event(), 
    "onActiveCellPositionChanged": new Slick.Event(), 
    "onDragInit": new Slick.Event(), 
    "onDragStart": new Slick.Event(), 
    "onDrag": new Slick.Event(), 
    "onDragEnd": new Slick.Event(), 
    "onSelectedRowsChanged": new Slick.Event(),