How to forcefully recreate and rerender a template in meteor


#1

I have a scenario, i want the template to be recreated and rerendered based on the user selection criteria. i have meteor method call in OnCreated event. this meteor method call takes argument based on the user selection.also i am using ReactiveVar in OnCreated. i have also a session variable here. Any suggestion? thanks.


#2

Something like this?

{{#if shouldRecreate}}
  {{> myTemplate}}
{{else}}
  <div>Recreating...</div>
{{/if}}
const trigger = new ReactiveVar(false);

Template.whatever.helpers({
  shouldRecreate: function() {
    return trigger.get();
  }
})

function recreate() {
  trigger.set(false);
  Tracker.afterFlush(function() { trigger.set(true); });
}

#3

I have tried your code, but everytime the helper returns the true, so i think the template is not recreated. The following is my code. what am i doing wrong. thanks

const trigger = new ReactiveVar(false);
Template.ExpenseAggregationContainer.helpers({
 'shouldRecreate':function(){
    /* console.log("from helpoer: "+Session.get("shouldrecreate"))
    Session.get("selAggCriteria"); */
    //return trigger.get();
    return Session.get("shouldrecreate");
    
    }
});

‘change #AggCriteria’:function(eve){
Session.set(“selAggCriteria”,$(’[name=“AggCriteria”]’).val() ) //capturing the list box value
trigger.set(true);
Tracker.afterFlush(function() { trigger.set(false); });
console.log("trigger value: "+trigger.get()); //returning true always
}


#4

By the way, why do you want to recreate the template? This is usually not how we do things with Meteor.


#5

That doesn’t work because Blaze is too smart. There are many good reasons to re-render templates, in cases where you use forms, contenteditable, and you know, we’re all guilty of jquery hacks.

This his a half baked solution:


#6

My solution works fine (after fixing an obvious bug). See this hackpad (and check the console).

Of course. Question is: does @syedmahamood have a good reason? From what I see of the code, I have a doubt.


#7

@Steve: My case is i have list box with different values like monthly,weekly,yearly etc. When ever the user select a specific value google graph should be displayed as per the value. Iam calling a meteor server method for aggregation and the code is on onCreated and OnRendered template events. So first time, by default the weekly graph should be displayed and subsequently as per the user selection. Iam new to meteor, not sure if there is a better way to do this. However for the time being i have achieved using different if conditions in my template. But i am sure this is not the right way. Thanks for all your comments


#8

Then maybe you could do something like this:

{{#if aggregationIsDone}}
  {{> myTemplate}}
{{else}}
  <div>Getting data...</div>
{{/if}}
const done= new ReactiveVar(false);

Template.whatever.helpers({
  aggregationIsDone: function() {
    return done.get();
  }
});

Template.whatever.event({
  'change_box_value': function() {
     done.set(false);
     Meteor.call('method', arguments, function(error, result) {
       done.set(true);
    });
  }
});