meteor - Re-rendering a hidden element -


i creating meteor app has list of posts visible on left half of page , hidden display container on right. user clicks on post title, , display container becomes on right side of page , shows full post. now, container displays full post hidden , has elements filled handlebar expressions. if click on post, same display container stays open, has contents changed.

clicking on post

template.postslist.events({    'click .post': function (e, template) {        e.preventdefault();        session.set('selectedpost', this._id);    } }); 

example handlebar expression

template.postdisplay.title = function () {    return posts.findone(session.get('selectedpost')).title } 

everything working fine , well, except reactive nature of display container. if in database changes (whether added comment, change in title, etc) display becomes hidden again , have re-click post. postslist template has values updated , seamlessly without blink or anything.

is there way have display container's values update while keeping being hidden?

this how i've been displaying container. regular show , hide.

on document load

$('#post-display-container').hide(); 

on element click

 $('.title').click(function () {     $('#post-display-container').show()  }); 

example of postdisplay template. didn't whole thing, of course.

<template name="postdisplay">    {{#each posts}}    <h3 class='title'>{{title}}</h3>    <p class='body'>{{body}}</p>    {{/each}} </template> 

template helper

template.postdisplay.helpers({      posts: function () {          return posts.find(session.get('selectedpost'));      } }) 

in meteor docs, in session.equal can see when click desired post.

adding class selected post on left give clue post current selected.

and in right show current selected post based on session well. don't try show post when clicking. think put class make post appears.

just clear, have change post display similar below when re-rendering class still there , post(on right) still showing. way, remove .hide() when page loads , change behavior when clicking post change session new current selected post.

<template name="postitem">   <div class="{{postclass}}">{{title}}</div> </template>  template.postitem.postclass = function() {    return session.equals("selectedpost", this._id) ?       "selected" : ""; }; 

Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -