Come posso integrare SlickGrid con le raccolte reattive di Meteor.js?

Question

SlickGrid si concentra sulla visualizzazione dei dati da una tabella o array, il che è ottimo. Meteor si concentra sulla manipolazione dei dati, ma utilizza Minimongo. In che modo SlickGrid può essere integrato con le collezioni Minimonogo e preservare le sue capacità di visualizzazione rapida e di gestione dei dati di grandi dimensioni?

Il mio modo attuale di farlo sembra sbagliato ed è alquanto brutto. Ho un array separato per SlickGrid e scrivere del codice colla per gestire gli eventi aggiornamento:

• Ordinamento: Gestiti da Meteor, innesca un aggiornamento completo (dati ri-regolazione)
• add/update/rimuovere: cercare di capire l'indice e invalidarla
• Filtering: Gestiti da Meteor, innesca un aggiornamento completo (dati ri-setting)

Come dovrei legare il cursore dati Meteor direttamente a SlickGrid e gestire solo gli eventi con un certo codice di colla? O si può usare Slick.dataview? L'obiettivo è gestire gli aggiornamenti a livello di cella.

Answer 1

L'utilizzo di Slick.Dataview consente di duplicare solo alcune funzionalità (ordinamento, filtro, CRUD ..) delle raccolte ma è necessario verificarlo per vedere come interagisce con Slick.Grid.

Se si guarda il codice Slick.Grid si può vedere che esso è solo utilizzando 3 funzioni di Dataview .getLength(), .getItem() e .getItemMetadata() e ultimo non è obbligatorio da implementare. Quindi Slick.Grid è fondamentalmente componente 'Visualizza' che legge solo 'Dati' (Dataview) ma dov'è il 'Controller'?

Bene, lo si deve effettivamente implementare e si può trovare un esempio in "SlickGrid Example 4".

parte più importante di questo esempio è in questo frammento:

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

Questo 2 eventi (onRowCountChanged, onRowsChanged) andranno sparati quando si aggiungere, rimuovere, aggiornare righe in Dataview e l'utilizzo di là funzioni si sta passando quella informazione a Grid.

idea in modo di base è di fare lo stesso per il vostro Mongo.Collection e, per quanto posso vedere Mongo.Cursor ha .observeChanges() che è in qualche modo simile a .onRowsChanged

Checkout SlickGrid API nell'origine alla fine del documento.

Per gestire la tua rete aggiorna in modo efficiente provare a utilizzare diversi metodi di invalidazione .invalidate (Tutti) Riga (s)() e anche .updateRow() e .updateCell() per un controllo ancora più preciso.

Questi sono per lo più i metodi per gestire gli aggiornamenti vista:

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

Se avete bisogno di interazione dell'utente con voi griglia Iscriviti a eventi e aggiornare la vostra collezione di conseguenza.

"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(),