I have a template hooked up to a data source that is changing pretty often, and I want that template to be able to be toggled by the user. I have a button in a parent template that triggers an animation on another template to slide off the screen... but as soon as that second template's data changes, the template updates and re-renders with the original css, i.e. it is displayed again when it should be hidden. To fix this, I tried adding a callback function to the animation function to set a session variable like Session.set("showData", false), and updated that template to only show if that session variable is true. This works great for HIDING it, the animation plays and it stays hidden, but I can't figure out how to make it display again with a slide-in animation. If I set that session variable to true it will re-render again instantly, with the original css and giving me no time to have a slide in animation.
Here is the html/templates:
//the two templates are called inside <body>
{{> controls}}
<div class="sidebar">
{{> dataview}}
</div>
<template name="controls">
<div id="controls">
<a class="toggle button">Hide Dataview</a>
</div>
</template>
<template name="dataview">
{{#if show}}
<div id="mydata">
<ul>
{{#each somedata}}
//any data in here
{{/each}}
</ul>
</div>
{{/if}}
</template>
And the related js:
Template.controls.events({
'click .toggle': function(e) {
//using an animation library but I would expect the same behaviour with jquery's .animate or simply modifying the css with vanilla js
TweenLite.set($('.sidebar'), {perspective:400});
TweenLite.to($('#mydata'), 0.5, {rotationY:90, transformOrigin:"right top", onComplete:toggleView});
}
});
function toggleView () {
Session.set("showData", false);
}
Template.dataview.show = function() {
//this is initialized as true in meteor.startup
return Session.get("showData")
}
Does that make sense? Am I going about this the wrong way? I feel like template.mytemplate.preserve may be what I need but I tried that and I either implemented it incorrectly or it didn't do what I was hoping. Thanks for any input!
