Показать Скрыть элементы Метеор путь

Question

У меня есть table с большим количеством tr, когда моя страница НАГРУЗКИ 1-й тр-шоу и второй Тг скрыть, например:

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

То, что я хочу построить: при нажатии на «шоу» т.р., нижней тр (который находится внизу) сусло показывает также, и когда вы нажали на «NEW» показывает тр он должен скрыть (например, тумблер)

ПРОБЛЕМА : Когда я clcked на "шоу" тр, ALL "скрыть" тр показывает тоже НЕ один, который находится под

Мой КОД:

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