¿Cómo puedo integrar SlickGrid con las colecciones reactivas Meteor.js?

Question

SlickGrid se enfoca en mostrar los datos de una tabla o matriz, lo cual es excelente. Meteor se enfoca en manipular los datos, pero usa Minimongo. ¿Cómo se puede integrar SlickGrid con las colecciones Minimonogo y preservar su rápida visualización y sus capacidades de manejo de datos?

Mi manera actual de hacerlo se siente mal y es algo feo. Tengo una matriz separada para SlickGrid y escribir algo de código de cola para controlar los eventos de actualización:

• Clasificación: procesadas por los meteoros, desencadena una actualización completa (datos re-ajuste)
• añadir/actualizar/eliminar: averiguar el índice y invalidarlo
• Filtrado: procesadas por los meteoros, desencadena una actualización completa (datos re-ajuste)

¿Cómo ato el cursor datos Meteor directamente a SlickGrid y manejar sólo los eventos con algún código de unión? ¿O se puede usar Slick.dataview? El objetivo es manejar las actualizaciones en un nivel celular.

Answer 1

El uso de Slick.Dataview solo duplicaría algunas funcionalidades (clasificación, filtrado, CRUD ..) de sus colecciones, pero debería verificarlo para ver cómo interactúa con Slick.Grid.

Si nos fijamos en el código Slick.Grid se puede ver que se está utilizando solamente 3 funciones de Dataview .getLength(), .getItem() y .getItemMetadata() y la última no es obligatorio de implementar Entonces, Slick.Grid es básicamente un componente 'Ver' que solo lee 'Datos' (Dataview) pero ¿dónde está el 'Controlador'?

Bueno, usted debe implementarlo realmente y puede encontrar un ejemplo en 'SlickGrid Example 4'.

parte más importante de este ejemplo es en este fragmento:

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

Este 2 eventos (onRowCountChanged, onRowsChanged) será despedida al añadir, eliminar, actualizar filas en Dataview y el uso de ahí funciones está de paso esa información a Grid.

idea tan básica es hacer lo mismo para su Mongo.Collection y por lo que puedo ver Mongo.Cursor tiene .observeChanges() que es algo similar a .onRowsChanged

Pedido SlickGrid API en origen al final del documento.

resuelva sus actualizaciones por cuadrícula de manera eficiente trate de usar diferentes métodos de invalidación .invalidate (Todos) fila (s)() y también .updateRow() y .updateCell() para el control aún más preciso.

Estos son en su mayoría métodos para manejar actualizaciones de 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, 

Si necesita la interacción del usuario con la red que suscribirse a eventos y actualizar su colección en consecuencia.

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