6

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

3 回答 3

11

如果你想有条件地隐藏或显示一个元素，你应该使用 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变量触发的，该变量是反应性的。

于 2013-07-20T05:36:30.590 回答
3

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

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

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

于 2013-07-20T05:24:58.823 回答
2

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

于 2013-07-20T05:26:33.847 回答