Meteor: Ukryj lub usuń element? Jaki jest najlepszy sposób

Question

Jestem całkiem nowy z Meteorem, ale naprawdę mi się to podobało i jest to moja pierwsza reaktywna aplikacja, którą buduję.

Chciałbym wiedzieć, w jaki sposób mogę usunąć element .main, gdy użytkownik kliknie, czy może lepszym sposobem będzie usunięcie istniejącego szablonu (z główną treścią), a następnie zastąpienie go innym szablonem meteorowym? Coś takiego byłoby proste i proste w aplikacji html/js (kliknięcia użytkownika-> usuń el z dom), ale tutaj nie jest to aż tak jasne.

Po prostu chcę się nauczyć i uzyskać wgląd w najlepsze praktyki.

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

Jeśli chcesz ukryć lub pokazać element conditionaly należy użyć reaktywne zachowanie Meteor: dodać warunek do szablonu:

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

następnie dodać pomocnika do szablonu:

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

i zmienić działanie na kliknij:

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

jeszcze dostać do zanikania element B ut, zamiast go ukrywać lub usuwać, a następnie powrócić na następny render, upewniasz się, że nigdy nie wróci.

renderowanie jest wyzwalane przez zmianę zmiennej Session, która jest reaktywna.

Answer 2

myślę użyciu szablonów warunkowe jest lepszym rozwiązaniem,

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

Będziesz musiał dokonać FIRSTRUN zmiennej sesji, tak że będzie ona wywołać aktualizacje DOM.

Answer 3

Meteor is reactive. Nie musisz zapisywać logiki, aby przerysować DOM po zmianie danych. Po prostu napisz kod, który po kliknięciu przycisku X, Y zostanie usunięty z bazy danych. To jest to; nie musisz się kłopotać żadnymi zmianami interfejsu/DOM, usuwaniem szablonów/przerysowywaniem ani żadnym innym. Za każdym razem, gdy zmieniają się dane zmieniające szablon, Meteor automatycznie ponownie wyszukuje szablon ze zaktualizowanymi danymi. To jest podstawowa funkcja Meteor.