显示隐藏元素流星方式

Question

我有table了很多tr，当我的页面加载 TR节目和第二 TR是隐藏的，例如：

<table> 
    <tr></tr> // shows 
    <tr></tr> // hide 
    <tr></tr> // shows 
    <tr></tr> // hide 
    ... 
    ... 
    etc. 
</table> 

我想什么建设：当你点击“显示” TR，低TR（位于下方）必须也表示，当你点击“NEW”显示TR它必须隐藏（如切换）

问题：当我clcked上 “秀” TR，所有的 “隐藏” TR也表示，不一个位于下方

我的代码：

<template name="postJobs"> 
    <tr class="smallInfo"> 
    // some code 
    </tr> 
    {{#if showFullContent}} 
    <tr class=" bigInfo"> 
    // some code 
    </tr> 
    {{/if}} 
</template> 


Template.postJobs.helpers({ 
    showFullContent:function(){ 
    return Session.get('showContent'); 
    } 
}); 

Template.postJobs.events({ 
    'click .smallInfo':function(){ 
    Session.set('showContent',true); 
    }, 
    'click .bigInfo':function(){ 
    Session.set('showContent',false); 
    }, 
}); 

我不想使用jQuery

Answer 1

您当前的代码存在的问题是您使用的是Session，这是一个全局反应词典，这意味着您最终只能为所有表格行存储一个状态。

下面是使用模板的解决方案范围的ReactiveVar对象：

HTML

<template name="jobsTable"> 
    <table> 
    {{#each jobs}} 
     {{> postJobs}} 
    {{/each}} 
    </table> 
</template> 

<template name="postJobs"> 
    <tr class="smallInfo"> 
    // some code 
    </tr> 
    {{#if showFullContent}} 
    <tr class=" bigInfo"> 
     // some code 
    </tr> 
    {{/if}} 
</template> 

JS

Template.postJobs.onCreated(function(){ 
    this.showFullContent = new ReactiveVar(false); 
}); 

Template.postJobs.helpers({ 
    showFullContent: function(){ 
    return Template.instance().showFullContent.get(); 
    } 
}); 

Template.postJobs.events({ 
    "click .smallInfo": function(event, template){ 
    template.showFullContent.set(true); 
    }, 
    "click .bigInfo": function(event, template){ 
    template.showFullContent.set(false); 
    } 
});