Meteor: Hide or delete an item? What is the best way

Question

I am new to Meteor, but I really liked it, and this is my first reactive application that I create.

I would like to know the way that I can remove the .main element when the user clicks, or maybe the best way is to delete the existing template (with the main content) and then replace the meteor with another template? Something like this would be simple and straightforward in an html / js application (user clicks-> removes el from dom), but here it’s not all that clear.

I just want to learn and learn a little about best practice.

 //gallery.html <template name="gallery"> <div class="main">First run info.... Only on first visit should user see this info.</div> <div id="gallery"> <img src="{{selectedPhoto.url}}"> </div> </template> //gallery.js firstRun = true; Template.gallery.events({ 'click .main' : function(){ $(".main").fadeOut(); firstRun = false; } }) if (Meteor.isClient) { function showSelectedPhoto(photo){ var container = $('#gallery'); container.fadeOut(1000, function(){ Session.set('selectedPhoto', photo); Template.gallery.rendered = function(){ var $gallery = $(this.lastNode); if(!firstRun){ $(".main").css({display:"none"}); console.log("not"); } setTimeout(function(){ $gallery.fadeIn(1000); }, 1000) } }); } Deps.autorun(function(){ selectedPhoto = Photos.findOne({active : true}); showSelectedPhoto(selectedPhoto); }); Meteor.setInterval(function(){ selectedPhoto = Session.get('selectedPhoto'); //some selections happen here for getting photos. Photos.update({_id: selectedPhoto._id}, { $set: { active: false } }); Photos.update({_id: newPhoto._id}, { $set: { active: true } }); }, 10000 ); } 

Answer 1

If you want to hide or show the conditionaly element, you should use the Meteor reactive behavior: add the condition to your template:

 <template name="gallery"> {{#if isFirstRun}} <div class="main">First run info.... Only on first visit should user see this info.</div> {{/if}} <div id="gallery"> <img src="{{selectedPhoto.url}}"> </div> </template> 

then add a helper to your template:

 Template.gallery.isFirstRun = function(){ // because the Session variable will most probably be undefined the first time return !Session.get("hasRun"); } 

and change the action when pressed:

 Template.gallery.events({ 'click .main' : function(){ $(".main").fadeOut(); Session.set("hasRun", true); } }) 

you can still fade out the element, but instead of hiding it or deleting it, and returning it to the next render , you will make sure that it never returns.

rendering is started by changing the Session variable, which is reactive.

Answer 2

I think using conditional patterns is the best approach,

 {{#if firstRun }} <div class="main">First run info.... Only on first visit should user see this info.</div> {{else}} gallery ... {{/if}} 

You will need to make firstRun a session variable so that it runs DOM updates.

Answer 3

Jet meteor . You do not need to write logic to redraw the DOM when data changes. Just write the code when, when you press the button, XY is removed from the database. It; You do not need to worry about any changes to the interface / DOM or about deleting / redrawing templates or any of them. Whenever the data that underlies the template changes, Meteor automatically overrides the template with updated data. This is the main function of Meteors.