Gridster add_widget with Meteor

Question

I have some troubles wihth gridster & meteor. At first, I loaded the whole widgets into my template and then recalculate the grid with a method below.

I have a template named dashboard, in this template I do a loop through my widgets and call a second template called widgetTmpl that contains all the formatted 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>

I execute this code with the callback 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
       };
    }
  });
});

This works fine, but when I add or reload a widget, I have to refresh the page due to the onRedered callback.

I heard about a gridster.add_widget methods, that does the perfect job but I don't know how to implement it to my code. Where should I use the gridster.add_widget ?

There is methods like Blaze.insert and Blaze.renderWithData but I have no idea how to use it

Nate Nate · Accepted Answer · 2015-07-30T14:52:03

I've never tried using Gridster, however I have integrated d3 into quite a few of my meteor apps. When I want the d3 context to reactivity change without a page refresh, I use a Tracker.autorun in my onRendered callback with a reactive datasource. For example my simplified code would look like this:

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

}); 

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

Where Plots is my mongo collection so that whenever a new item is inserted/updated in the collection, the drawPlot function re-fires.

Gridster add_widget with Meteor

1 Answers