StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should use Session variables coupled with Handlebars helpers.</p> <pre><code><template name="dropdown"> opened helper resolves to current dropdown state <div class="dropdown {{opened}}"> iterate over each group using a cursor {{#each groups}} call subtemplate fed with current group document fetched from the cursor {{> group}} {{/each}} </div> </template> <template name="group"> assign a unique id to the group div, using the document._id <div id="group-{{_id}}" class="group {{opened}}"> ... and so on </div> </template> Template.dropdown.helpers({ opened:function(){ // Session variable will be undefined on first page view (closed state) // then it will have the value set in the click handler return Session.get("dropdown-opened")?"open":""; }, groups:function(){ return Groups.find(); } }); Template.dropdown.events({ "click .dropdown":function(){ var opened=Session.get("dropdown-opened"); // toggle open state Session.set("dropdown-opened",!opened); } }); // executed once on each template instance creation Template.group.created=function(){ // this.data._id is the fetched document._id // comment this line if you don't want your stuff to be collapsed // when the template is re-created (ie when you change page) Session.set("group-"+this.data._id+"-opened",false); }; Template.group.helpers({ opened:function(){ // this._id is the fetched document._id return Session.get("group-"+this._id+"-opened")?"open":""; }, subGroups:function(){...} }); Template.group.events({ "click .group":function(event,template){ // once again, template.data._id corresponds to the id of the // document used to feed the group template var sessionKey="group-"+template.data._id+"-opened"; var opened=Session.get(sessionKey); Session.set(sessionKey,!opened); } }); </code></pre> <p>This is untested code but I do similar stuff on my app and it works like a charm. I think this is the Meteor way (Session+helpers) of achieving this kind of things (as opposed to using jQuery to manipulate the DOM and class names). Unfortunately, this kind of pattern is quite verbose and can be a bit obscure for developers coming from non-Meteor classic front-end JS web-app development, but I'm sure this is gonna be improved.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload