Gridster add_widget 与 Meteor答案

【问题标题】：Gridster add_widget with MeteorGridster add_widget 与 Meteor
【发布时间】：2015-07-30 08:07:48
【问题描述】：

我在使用 gridster 和流星时遇到了一些麻烦。起初，我将整个小部件加载到我的模板中，然后使用下面的方法重新计算网格。

我有一个名为仪表板的模板，在这个模板中，我循环遍历我的小部件并调用第二个名为 widgetTmpl 的模板，其中包含所有格式化的 html

<template name="dashboard">
<div id="dashboardBody">
    <button id="configMode" class="btn btn-primary"> <i class="fa fa-pencil"></i>Configuration </button>
    <div class="gridster">
        <ul id="widgetItemList" class="widget_item">
            {{#each activeWidgets}}
                {{> widgetTmpl}}
            {{/each}}
        </ul>
    </div>
</div>
</template>

我使用回调 onRendered 执行这段代码

Template.dashboard.onRendered(function(){
    var gridsterUl = jQuery(".gridster ul");
    gridsterUl.gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [25, 25],
        resize : {
           enabled : true
        },
        draggable: {
           start: overlay_fix_start,
           stop: overlay_fix_stop
        },
        serialize_params : function($w, wgd){
        return {
            id : $w.prop('id'),
            col : wgd.col,
            row : wgd.row,
            size_x : wgd.size_x,
            size_y : wgd.size_y
       };
    }
  });
});

这工作正常，但是当我添加或重新加载小部件时，由于 onRedered 回调，我必须刷新页面。

我听说有一个 gridster.add_widget 方法，它做得很完美，但我不知道如何在我的代码中实现它。我应该在哪里使用 gridster.add_widget ？

有像 Blaze.insert 和 Blaze.renderWithData 这样的方法，但我不知道如何使用它

【问题讨论】：

标签： meteor meteor-blaze gridster

【解决方案1】：

我从未尝试过使用 Gridster，但我已将 d3 集成到我的很多流星应用程序中。当我希望 d3 上下文在不刷新页面的情况下进行反应性更改时，我在我的 onRendered 回调中使用了 Tracker.autorun 和反应性数据源。例如，我的简化代码如下所示：

Template.d3Plot.onRendered( function () {
    Tracker.autorun(function() {
        // Function That Draws and ReDraws due to Tracker and Reactive Data
        drawPlot(Plots.find());
    });

}); 

drawPlot = function (plotItems) {
 .....
}

Plots 是我的 mongo 集合，因此每当在集合中插入/更新新项目时，drawPlot 函数就会重新触发。

【讨论】：