顯示隱藏元素流星方式

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