Meteor: Nascondi o rimuovi elemento? Qual è il modo migliore

Question

Sono abbastanza nuovo con Meteor ma mi sono davvero divertito e questa è la mia prima app reattiva che sto costruendo.

Mi piacerebbe sapere come rimuovere l'elemento .main quando l'utente fa clic o forse un modo migliore sarebbe rimuovere il modello esistente (con contenuto principale) e quindi sostituirlo con un altro modello di meteora? Qualcosa di simile sarebbe semplice e diretto nell'app html/js (l'utente fa clic-> rimuove el da dom) ma qui non è tutto chiaro.

Sto solo cercando di imparare e per alcune informazioni sulle migliori pratiche.

//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

Se si desidera nascondere o mostrare un elemento conditionaly si dovrebbe usare il comportamento reattivo di Meteor: aggiungere una condizione per il modello:

<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> 

quindi aggiungere un aiuto per il modello:

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

e modificare l'azione sul clic:

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

è ancora ottenere per sfumare l'elemento b poi invece di nasconderlo o rimuoverlo e farlo tornare sul prossimo render assicurati che non ritorni mai più.

il rendering viene attivato modificando la variabile Session, che è reattiva.

Answer 2

Credo che utilizzando i modelli condizionali è un approccio migliore,

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

Dovrete fare FirstRun una variabile di sessione, in modo che innescherà aggiornamenti DOM.

Answer 3

Meteor is reactive. Non è necessario scrivere la logica per ridisegnare il DOM quando i dati cambiano. Basta scrivere il codice che quando si fa clic sul pulsante X, Y viene rimosso dal database. Questo è tutto; non è necessario preoccuparsi di eventuali modifiche all'interfaccia/DOM o alla rimozione/ridisegno dei modelli o a qualsiasi altra cosa. Ogni volta che i dati che sottostanno a un modello cambiano, Meteor esegue automaticamente il riesame del modello con i dati aggiornati. Questa è la caratteristica principale di Meteor.