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?
Related
I like to work with meteor, but I have a problem I can't find a solution for.
In the template file I have this code:
<template name="klussenboard">
<h2>Klussen</h2>
<div class="klussenboard">
{{#each klus}}
{{#if status=1}}
<li>
<a class="startlink" href="#"><img src="/images/starten.png"></a>
</li>
{{/if}}
{{/each}}
</div>
</template>
This is the js client code
Template.klussenboard.klus = function () {
return Klussen.find({"status": { $gt: 0 }}, {
sort: {datum: -1}
});
};
But this doesn't work. How can I do a statement in a template file?
Looking forward to an answer.
Spacebars (meteor's templating library), much like Handlebars (that it is based on) doesn't execute arbitrary expressions like, say, angular.js's templates.
If you change the statement you're trying to write into a helper method, like so (feel free to pick a better name!):
<template name="klussenboard">
<h2>Klussen</h2>
<div class="klussenboard">
{{#each klus}}
{{#if isEnabled}}
<li>
<a class="startlink" href="#"><img src="/images/starten.png"></a>
</li>
{{/if}}
{{/each}}
</div>
</template>
You could then define the isEnabled helper in any client side .js file - say, client/klussenboard.js like so:
Template.item.isEnabled = function() {
return this.status == 1;
}
So, this, in helper functions is
This assumes that you are in a context where status is a variable (which, based on your question, you are)
This would then reactively update whenever the status variable changes.
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>
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 have a handlebars template that contains:
{{^is mymodel.someproperty}}
I don't understand what the significance of the caret symbol is. I've searched around, the only place I'm seeing it is on Handlebars Expressions
It's used like so:
{{#each nav}}
<a href="{{url}}">
{{#if test}}
{{title}}
{{^}}
Empty
{{/if}}
</a>
{{~/each}}
What does "{{^" mean in handlebars? It sort of looks like a .NOT. or .ELSE. or something like that.
-Eric
The reason it's not in the handlebars doc is because it's a mustache construct called an Inverted Section.
See: https://mustache.github.io/mustache.5.html#Inverted-Sections
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
... disabling inverse operations such as {{^foo}}{{/foo}} unless fields are explicitly included in the source object._
http://handlebarsjs.com/reference.html
http://handlebarsjs.com/expressions.html