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

时间:2012-04-27 19:16:47

标签: javascript meteor slickgrid minimongo

SlickGrid专注于显示表或数组中的数据,这很棒。 Meteor专注于操纵数据,但使用Minimongo。 SlickGrid如何与Minimonogo系列集成并保留其快速显示和大数据处理功能?

我现在这样做的方式感觉不对,有点难看。我有一个单独的SlickGrid数组,并编写了一些胶水代码来处理更新事件:

  • 排序:由Meteor处理,触发完全刷新(重新设置数据)
  • 添加/更新/删除:搞清楚索引并使其无效
  • 过滤:由Meteor处理,触发完全刷新(重新设置数据)

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

1 个答案:

答案 0 :(得分:2)

使用Slick.Dataview只会复制集合的某些功能(排序,过滤,CRUD ..),但您应该检查它以查看它与Slick.Grid的交互方式。

如果你看一下Slick.Grid代码,你会发现它只使用了Dataview的3个功能 .getLength() .getItem() .getItemMetadata(),最后一个不是必须实现的。 所以Slick.Grid基本上是' View'只读组件数据' (Dataview)但是' Controller'在哪里?

你要实际实现它,你可以在' SlickGrid Example 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的函数时,这两个事件(onRowCountChanged,onRowsChanged)将被触发。

所以基本的想法是为你的Mongo.Collection做同样的事情,据我所知Mongo.Cursor有 .observeChanges()有点类似于 .onRowsChanged

在文档末尾的源代码中检出SlickGrid API。

要有效地处理网格更新,请尝试使用不同的失效方法 .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,

如果您需要与您进行用户互动,请订阅活动并相应地更新您的收藏。

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