I'm pretty new to this whole handlebars concept but basically I want to be able to set a variable to true on the click of a button and then back to false again from submitting a form in the template that is displayed only if the variable is true.
For the body I have the following code:
<body>
{{#if notification}}
{{> notifier}}
{{else}}
{{#if currentUser}}
{{> dashboard}}
{{else}}
{{> login}}
{{/if}}
{{/if}}
</body>
Lets say I have a link in the dashboard which runs in the client js with the id noticationTestLink, what would I put in the dashboard events for the following function:
'click #noticationTestLink' : function(event) {
event.preventDefault();
}
if I wanted to set the notification variable to true (this is the notification that I refer to in the body).
I'm pretty sure I could figure out the rest if I know how to do this. Please excuse my lack of experience/knowledge in using handlebars. I'm also pretty new to just using Meteor. Thanks in advance!
PS: I may be completely on the wrong track with this, but that's why I'm asking the question.
Hard to believe no one has answered this question yet!
js:
'click #noticationTestLink' : function(event) {
event.preventDefault();
Session.set('notification',true);
}
Template.myTemplate.helpers({
notification: function(){
return Session.get('notification');
}
});
You need a template, Meteor will wrap it with <body>...</body> automatically:
<template name="myTemplate">
{{#if notification}}
{{> notifier}}
{{else}}
{{#if currentUser}}
{{> dashboard}}
{{else}}
{{> login}}
{{/if}}
{{/if}}
</template>
Related
I am willing to set the header of my app, based on Session variables.
Here is the Spacebars template :
{{#if session 'header'}}
<header id="page_header">
{{#if session 'header_left'}}
<a class="left_btn" href="{{session 'header_left'}}">{{session 'header_left'}}<a>
{{/if}}
<h1>{{session 'header'}}</h1>
{{#if session 'header_right'}}
<a class="right_btn" href="{{session 'header_right'}}">{{session 'header_right'}}<a>
{{/if}}
</header>
{{/if}}
Here is how I defined the global "session" helper :
Template.registerHelper('session', function(input){
return Session.get(input);
});
Here is the error I am having :
Errors prevented startup:
While building the application:
client/main.html:17: Unexpected closing template tag
...}}<a> {{/if}} <h1>{{sess...
^
I can't see anything wrong with the synthax though.
Something wrong with the nesting of {{#if}} tags in Meteor?
Any suggestion is most welcome.
maybe because you need a </a> to finish your anchor?
Using gadicc/meteor-reactive-window Meteor Package to display diffrent template depending upon the screen size.
This is pictureDisplatSection.html File
<template name="pictureDisplaySection">
<div class="display">
{{#if rwindow.screen('lte','small') }}
{{> small}}
{{else}}
{{> large}}
{{/if}}
Current jQuery(window).width() is {{rwindow.$width}}
</div>
</template>
<template name="small">
I am Small
</template>
<template name="large">
I am Large
</template>
This code has started working intially but out of the blue it has started giving this error
While building the application:
client\template\pictureDisplaySection.html: 4 : Expected space
... {{#if rwindow.screen('lte','small') }}
...
^
Your application has errors. Waiting for file change.
I have tried to find more information but no luck till now. Really appreciate some help.
Thanks !!!
It seems a syntax error. Inside the if block, the function receives arguments with a space separated instead of parenthesis (..,..,)。
{{#if rwindow.screen 'lte' 'small'}}
{{> small}}
{{else}}
{{> large}}
{{/if}}
I want to create complex blog page with meteor. I have a template with two sub template as below:
<template name="singlePostPage">
{{> post }}
{{#each comments}}
{{> comment}}
{{/each}}
</template>
I want to load post when page is loading and after post load completely then load comments. (like disqus comment system that load after entire page load)
Please guide me how to do this and what packages may useful for this scenario?
You can set a session variable or reactive variable when the post template has been rendered, and then have a handlebars {{#if}} to show the comments based on the value of that variable. Something like below should work.
.js file (Sessions)
Template.post.onRendered(function() {
Session.set("postRendered", true);
});
Template.singlePostPage.helpers({
postRendered: function() {
return Session.get("postRendered");
}
});
Just make sure that the postRendered Session variable is set to false or null when you first load the singlePostPage template. If you want to use a reactive variable:
Add this package:
meteor add reactive-var
And use this .js code:
var postRendered = new ReactiveVar(false);
Template.post.onRendered(function() {
postRendered.set(true);
});
Template.singlePostPage.helpers({
postRendered: function() {
return postRendered.get();
}
});
For both examples you can use this .html file
<template name="singlePostPage">
{{> post }}
{{#if postRendered}}
{{#each comments}}
{{> comment}}
{{/each}}
{{/if}}
</template>
I was trying to extend an application and found out that whenever I try to access the _id value from inside an #if clause, it always returns empty...
This example returns the {{_../id}}:
<template name="showsId">
{{# each comments}}
<div class="id">{{../_id}}</div>
{{/each}}
</template>
But this one doesn't:
<template name="doesNotShowId">
{{# each comments}}
{{#if editingComments}}
<div class="id">{{../_id}}</div>
{{else}}
<div class="id">{{../_id}}</div>
{{/if}}
{{/each}}
</template>
Do you know why this might be happening? As far as I know this should work as expected.
EDIT:
This is a template that's being called from another one, in this fashion:
<template name="statusitems">
<div>
{{#each statusItem}}
<div>
{{> statusComments }}
</div>
{{/each}}
</div>
</template>
That's why I'm asking for the {{../_id}}.
For both data contexts, the comment document seems to be provided by the each iterator.
Therefore, I believe you should not be using ../ anyway since the document properties suchs as _id are already provided within the data context.
This should work as is:
<template name="doesNotShowId">
{{# each comments}}
{{#if editingComments}}
<div class="id">{{_id}}</div>
{{else}}
<div class="id">{{_id}}</div>
{{/if}}
{{/each}}
</template>
So should this:
<template name="doesNotShowId">
{{# each comments}}
<div class="id">{{_id}}</div>
{{/each}}
</template>
I'm trying to get something very basic to work in Meteor, where when the user clicks a button a Session.set() is called and then a div is shown. The problem is that if I don't call the Session.set() the behaviour is as expected where the div is shown upon clicking the button. But once I include the Session.set() i need to click twice before the message is actually show. To make sure the behaviour can be reproduced make sure the page is a clean load and not a Meteor refresh!
The code for the HTML is:
<head>
<title>test</title>
</head>
<body>
{{> home}}
</body>
<template name="home">
<div>
<input type="button" id="addButton" value="add">
</div>
{{> popup}}
</template>
<template name="popup">
{{#with messageHelper}}
<div id="messageDiv" style="display: none">
message is {{message}}
</div>
{{/with}}
</template>
And here is the Javascript that makes it tick.
Template.home.events({
'click #addButton': function(){
// **** if this line is commented out, it will work
Session.set("messageHelper", {message: 'HERE'});
// ****
$('#messageDiv').show();
}
});
Template.popup.helpers({
messageHelper: function(){
return Session.get("messageHelper");
}
});
I think the changed session variable rerenders your template in its original state which sets style="display: none". The problem is discussed here. The solution there is to reorganise your template so the reactivity is not in the template where display is being toggled.
An easier solution might be just to use handlebars #if helper to display your template whenever there is a message:
<template name="popup">
{{#with messageHelper}}
{{#if message}}
<div id="messageDiv">
message is {{message}}
</div>
{{/if}}
{{/with}}
</template>
No need for .show() in the event handler then.