Javascript 流星：隐藏还是移除元素？最好的方法是什么

我对Meteor很新，但我一直很喜欢它，这是我正在构建的第一个反应式应用程序

我想知道一种在用户单击时删除

.main

元素的方法，或者更好的方法是删除现有模板（包含主要内容），然后替换为另一个meteor模板？在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 );
}

//gallery.html
首次运行信息。。。。只有在第一次访问时，用户才能看到此信息。
//gallery.js
firstRun=true；
Template.gallery.events({
'click.main'：函数（）{
$（“.main”）.fadeOut（）；
firstRun=false；
}
})
if（Meteor.isClient）{
功能showSelectedPhoto（照片）{
变量容器=$（“#图库”）；
container.fadeOut（1000，function（）{
Session.set（'selectedPhoto'，photo）；
Template.gallery.rendered=函数（）{
var$gallery=$（this.lastNode）；
如果（！firstRun）{
$（“.main”）.css（{display:“none”}）；
控制台日志（“非”）；
}
setTimeout（函数（）{
$gallery.fadeIn（1000）；
}, 1000)
}        
});      
}
副自动运行（函数（）{
selectedPhoto=Photos.findOne（{active:true}）；
显示选定照片（选定照片）；
});
Meteor.setInterval（函数（）{
selectedPhoto=Session.get（'selectedPhoto'）；
//这里有一些用于获取照片的选项。
更新（{u id:selectedPhoto.{u id}，{$set:{active:false}}）；
更新（{u id:newPhoto.{u id}，{$set:{active:true}}）；
}, 10000 );
}

我认为使用条件模板是一种更好的方法

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

{{{#如果第一次运行}
首次运行信息。。。。只有在第一次访问时，用户才能看到此信息。
{{else}
画廊。。。
{{/if}

---

您必须将firstRun设置为会话变量，以便触发DOM更新。

。当数据更改时，您不需要编写重新绘制DOM的逻辑。只需编写代码，当单击X按钮时，Y将从数据库中删除。就这样,；您不需要为任何接口/DOM更改或模板删除/重画或其他任何问题而烦恼。无论何时支撑模板的数据发生更改，Meteor都会自动使用更新的数据重新提交模板。这是Meteor的核心功能。

如果要有条件地隐藏或显示元素，则应使用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);
  }
})

您仍然可以淡出元素，但不必隐藏它或删除它，然后让它在下一次

渲染时返回

，您可以确保它永远不会回来

---

通过更改

会话

变量触发渲染，该变量是被动的

非常感谢你。这完全有道理，并且与我编写应用程序其余部分的方式一致。再次感谢您的回答和示例！能提供帮助总是一件很愉快的事：-）嘿，哥布——我在为一个新项目学习流星，这真的很有帮助！谢谢如果要在#each块中的集合中显示/隐藏每个项目，该怎么办。例如，我想通过点击按钮来切换{{someProp}}的可见性。每个街区都有表演。