Show Hide items Meteor way
I have table
with a lot tr
, when my page loads 1st tr shows and 2nd tr hides, e.g .:
<table>
<tr></tr> // shows
<tr></tr> // hide
<tr></tr> // shows
<tr></tr> // hide
...
...
etc.
</table>
What I want to build: . When you press "show" tr, the bottom tr (which is below it) should show as well, and when you press "NEW" it should show tr, it should hide (eg switch)
PROBLEM: When I clicked "show" tr, ALL "hide" shows tr, NOT which is under
My code:
<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);
},
});
I don't want to use jQuery
source to share
The problem with your current code is that you are using Session
which is a global reactive dictionary, which means you only store one state for all of your table rows.
Below is a solution using a ReactiveVar
constrained pattern object :
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);
}
});
source to share