Question

我和gridster＆amp ;;有一些麻烦。流星。首先，我将整个小部件加载到我的模板中，然后使用下面的方法重新计算网格。

我有一个名为dashboard的模板，在这个模板中我通过我的小部件循环并调用第二个名为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这样的方法，但我不知道如何使用它

Answer 1

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

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函数都会重新启动。

与Meteor一起使用Gridster add_widget

1 个答案: