Meteor中的模板级反应

Question

我正在处理一个问题，我想在仪表板中以图表（通过perak:c3）和表格（通过aslagle:reactive-table）显示数据。我的问题是数据是从MongoDB中的集合中提取的，它的格式可以立即通过c3进行绘图，但是需要转换为本地集合以供反应表包使用，如建议的那样在this answer中的上一个问题。

当我更改要显示的数据集时，我想要更新图表，还要更新表格。这需要更改本地集合中的值，但这会减慢速度，因此不是平滑地重绘图表，而是冻结页面，然后显示新数据。

我创建了一个示例项目on GitHub here，因此可以轻松复制问题。如果您运行应用程序并在浏览器中选择数据集，您将看到我的意思

要查看我想在图表中保留的被动行为，请转到client/templates/dashboard/dashboard.html，然后只需注释掉表格模板{{> dashboardTable}}

现在更改数据集以查看图表如何平滑重绘。基本上我正在努力确保模板dashboardChart和dashboardTable彼此独立呈现。

更新

根据迈克尔弗洛伊德建议使用超时帮助了一下

Meteor.setTimeout(function(){createLocalCollection(data)},200);

但是虽然图表得到了平滑的绘制，但当表格完成填充时，图表会再次绘制。看起来它跳到了一些我无法理解的中间状态。 Here is a video显示我的意思。

Answer 1

请记住，js是单线程的。你有两件事情，他们将按顺序发生。您可以做的是推迟使用Meteor.setTimeout()更新本地集合的代码。这将允许图表首先更新，然后您的表可以更新第二。在你运行一个更新DOM的函数（在你的情况下d3正在更新svg画布）之前我已经看过这个，但实际的屏幕更新卡在长时间运行的js之后。

我特意尝试了这一点，图表表现还不错。

Meteor.setTimeout(function(){createLocalCollection(data)},500);

将间隔缩小到100允许图表更新，但菜单没有完全淡出，直到本地集合完成更新。

我对表和本地集合使用的一件事是仅在屏幕上呈现相应的非本地文档时更新本地集合文档（假设之间存在1：1的关系）原始数据和转换版本）。这允许反应表懒惰地加载。

Answer 2

我将此作为单独的答案添加，因为它是一种完全不同的方法。

使用d3中的for i in range(len(rader)): rader[i] = '{}{}{}'.format(i," ",rader[i]) 回调来调用本地集合更新。

你在哪里：

onRendered

在chart = c3.generate({ bindto: '#dataset-chart', 中，添加：

dashboard_chart.js

当然，您需要从事件处理程序中删除chart = c3.generate({ onrendered: createLocalCollection(), bindto: '#dataset-chart', 。

为避免必须通过d3中的createLocalCollection(data)处理程序传递数据上下文，还要更新onrendered函数以使用您之前定义的反应变量createLocalCollection来建立当前数据集：

datasetID

使用此方法，您可以让D3告诉您图表渲染何时完成，然后您的表格可以开始填充。结果是即时图表更新，然后是表格更新。也没有耽搁超时。