流星：隐藏或删除元素？啥是最好的方法

Posted 2023-03-08

【中文标题】流星：隐藏或删除元素？啥是最好的方法

【英文标题】：Meteor: Hide or remove element? What is the best way流星：隐藏或删除元素？什么是最好的方法

【发布时间】：2013-07-19 06:54:31

【问题描述】：

我对 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 );

【参考方案1】：

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

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

您必须让 firstRun 成为一个会话变量，以便它触发 DOM 更新。

【参考方案2】：

Meteor is reactive。当数据发生变化时，您不需要编写重绘 DOM 的逻辑。只需编写当单击 X 按钮时，从数据库中删除 Y 的代码。而已;您无需为任何界面/DOM 更改或模板删除/重绘或任何此类而烦恼。每当支持模板的数据发生变化时，Meteor 都会自动使用更新的数据重新渲染模板。这是 Meteor 的核心功能。

【参考方案3】：

如果你想有条件地隐藏或显示一个元素，你应该使用 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 上重新出现，而是确保它永远不会回来。

通过更改 Sessionvariable 来触发渲染，该变量是反应式的。

【讨论】：

非常感谢。这是完全有道理的，并且与我编写应用程序其余部分的方式一致。再次感谢您的回答和示例！

很高兴能提供帮助 :-)

嘿 Gorb -- 我正在为一个新项目学习 Meteor，这真的很有帮助！谢谢！

如果你想在#each 块的集合中显示/隐藏每个项目怎么办。例如，我想根据按钮单击来切换 someProp 的可见性。 Show 也在#each 块中。