How to repaint data on home route from Reactive Var


#1

Have a a reactive var that is loaded data from Meteor.method. I have two routes, one that is ‘home’ and another that shows some other data. How can I make it such that when I come back to my home route that when I reload my home template that it loads with my previous data still in my reactive var ?

PackageData = new ReactiveVar([]);

action: function(p, qp) {
		BlazeLayout.render('layout', { main: 'home' });
	},
name: 'home',
});```

#2

2 things
1- this code does not help much
2- you want when users refresh the page to continue with the variable value or to remain as the user moves between paths?


#3

Hey Cottz,

When a user moves from the home route to the another and then clicks ‘back’, I want the data in my reactive var to still show on the screen.

How could this be done in flow router ?


#4

If the page does not refresh should not be a problem, maybe something is wrong with the code


#5

And if PackageData is not empty array do not run that call, just use already existing data.
What is hard on that ? It is 1 if


#6

Perhaps its my templates?

	getPackages: function() {
		return PackageData.get();
	}
});```

```<template name="layout">
<nav class="nav navbar">
<div class="navbar-header">
<h2 class="navbar-title navbar-left">meta-data search</h2>
</div>
<div class="navbar-form navbar-right" role="search">
{{>searchBox}}
</div>
</div>
</nav>
{{> Template.dynamic template=main}}
</template>```

```<template name="home">
<div class="container sbox">
{{> searchResult}}
</div>
</template>```

```<template name="home2">
<div class="container">
{{> table}}
</div>
</template>```


```<template name="searchBox">
<div class="sbox">
<input type="text" id="search-box" placeholder="search tables here" />
</div>
</template>```

```<template name="searchResult">
<div class="row" id='search-result'>
{{#with getPackages}}
<div id="search-meta">
Result Count: {{metadata.total}} in ({{metadata.took}} mseconds)
</div>
<div class="header">
<h5>Tables:</h5>
</div>
{{#each data}}
<div class="package">
<div class="tname">
<h5><a href="{{pathFor 'table' tname=tname tid=id}}">{{tname}}</a></h5>
</div>
<div class="comment"><b>Comments: </b>{{tcomment}}</div>
</div>
{{/each}}
{{/with}}
</div>
</template>```

Search box is a input form. Results from the query are put in PackageData.. When I search the I get my results I can move to my second route, but when I come back to home I see no results populated from PackageData.

#7

Can you show all parts where you are using PackageData.set?


#8

sure,

  	Meteor.call('search-packages', text, function(err, results) {
  		if (err) throw err;
  		console.log(results);
  		PackageData.set(results);
	});
}```

```Template.searchBox.events({
	"keyup #search-box": _.throttle(function(e) {
  		var text = $(e.target).val().trim();
  		if (text.length <= 1) {
  			PackageData.set();
  		} else {
  			getResults(text);
  		}
  	}, 200)
});```

#9

I failed to find the problem but you can do many things to find it

  • check not have a set in the router and that the page is not reloaded when navigating
  • comment all sets on the application and do them in the console, then navigate and check if the problem disappears
  • try the same as above but with Sessions

#10

Thanks for all the help. I found the mistake in another place in the code. : )