Meteor:隐藏还是删除元素？什么是最好的方法

Question

我对Meteor很新,但真的很喜欢它,这是我建立的第一个被动应用程序.

我想知道一种方法,我可以.main在用户点击时删除该元素,或者更好的方法是删除现有模板(使用主要内容),然后替换为另一个流星模板？在html/js应用程序(用户点击 - >从dom中删除el)这样的东西会简单明了,但这里并不是那么清楚.

我只是想学习并了解最佳实践.

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

如果要隐藏或显示元素条件,则应使用Meteor的反应行为:向模板添加条件:

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

然后在模板中添加一个帮助器:

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

并在点击时更改操作:

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

你仍然可以淡出元素但是然后不是隐藏它或移除它并让它回到下一个render你确保它永远不会回来.

通过更改Session变量触发渲染,这是反应性的.