流星：隐藏或移除元素？什么是最好的方式

我是流星相当新的，但真的很享受它，这是我第一个被动的应用程序，我正在建设。流星：隐藏或移除元素？什么是最好的方式

我想知道一种方法，可以在用户单击时删除.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); 
}

来源

2013-07-19 jeffreynolte

如果要隐藏或显示元素conditionaly你应该使用流星的反应行为：添加一个条件，你的模板：

<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); 
    } 
})

你仍然可以淡出元素b然后，而不是隐藏它或删除它，让它回来在下一个render你确保它永远不会回来。

通过更改变量Session来触发渲染，该变量是被动的。

来源

2013-07-20 05:36:30

非常感谢。这是完全合理的，并与我如何编写应用程序的其余部分保持一致。再次感谢您的答案和例子！ – jeffreynolte

它总是很高兴得到协助:-) –

嗨戈布 - 我正在学习一个新项目的流星，这真的很有帮助！谢谢！ –

我想使用条件的模板是一个更好的方法，

{{#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-20 05:24:58 raphonic

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

来源

2013-07-20 05:26:33

流星：隐藏或移除元素？什么是最好的方式

回答

相关问题