如何将SlickGrid与Meteor.js反应式集合集成？

Question

SlickGrid专注于显示表或数组中的数据，这很棒。 流星专注于处理数据，但使用Minimongo。 SlickGrid如何与Minimonogo集合集成并保留其快速显示和大数据处理功能？

我当前的操作方式感觉不对，而且有点难看。 我为SlickGrid有一个单独的数组，并编写了一些粘合代码来处理更新事件：

• 排序：由流星处理，触发完全刷新（重置数据）
• 添加/更新/删除：确定索引并使之无效
• 过滤：由流星处理，触发完全刷新（重置数据）

如何将流星数据光标直接绑定到SlickGrid并仅处理带有某些粘合代码的事件？ 还是可以使用Slick.dataview？ 目标是在单元级别上处理更新。

Answer 1

使用Slick.Dataview只会复制集合的某些功能（排序，过滤，CRUD ..），但是您应该检查一下以查看其如何与Slick.Grid交互。

如果查看Slick.Grid代码，您会发现它仅使用Dataview .getLength（） ，.getItem（）和.getItemMetadata（）的 3个函数，而最后一个不是强制实现的。 因此，Slick.Grid基本上是“视图”组件，仅读取“数据”（Dataview），但“控制器”在哪里？

好吧，您实际上要实现它，并且可以在“ SlickGrid示例4 ”中找到一个示例。

该示例中最重要的部分在以下代码段中：

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

当您在Dataview中添加，删除，更新行并使用该函数将信息传递给Grid时，将触发这2个事件（onRowCountChanged，onRowsChanged）。

所以基本思路是对您的Mongo.Collection做同样的事情，据我所知Mongo.Cursor具有.observeChanges（） ，它与.onRowsChanged有点相似

在文档末尾签出SlickGrid API。

为了有效地处理Grid更新，请尝试使用不同的失效方法.invalidate（All）Row（s）（）以及.updateRow（）和.updateCell（）进行更精确的控制。

这些主要是处理视图更新的方法：

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

如果您需要与用户进行交互，则Grid可以订阅事件并相应地更新您的集合。

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