Ok, I know this is super basic, but I've been staring at it for 2 days and can't see why it is not working. I am using Handlebars IF helpers to conditionally render a template.
Here is the HTML:
<head>
<title>flash</title>
</head>
<body>
{{#if isTrue}}
{{> hello}}
{{else}}
{{> goodbye}}
{{/if}}
</body>
<template name="hello">
<h1>Hello!</h1>
</template>
<template name="goodbye">
<h1>Goodbye!</h1>
</template>
Here is the simple coffee file:
isTrue = true
I expect the {{> hello}} template to render, but no luck. I just get the {{> goodbye}} template. It's odd since I have other projects where I have done this successfully. I must be missing something obvious here.
The isTrue variable needs to be in a template for it to work. So, put the body contents in a template:
<body>
{{> body}}
</body>
<template name="body">
{{#if isTrue}}
{{> hello}}
{{else}}
{{> goodbye}}
{{/if}}
</template>
And then you can define isTrue like this:
Template.body.helpers
isTrue: -> true
Note:
Template.body.isTrue = -> true
is now deprecated.
The new syntax looks like this:
Template.test.helpers({
'isTrue': function(){
return true;
}
});
It should still work but if you open your console it will give you a warning about the syntax.
with Meteor 1.2.0.2 you can do it like this
Template.hello.helpers({
isTrue() { return true }
});
Related
I'd like to access a parameter template while I'm on a {{#each}} already. Something like:
<template name="overview">
{{> userList users=users level=0}}
</template>
<template name="userList">
{{#each users}}
<div class="level{{../something}}">
<!-- not working, how can i access {{something}} here ? -->
{{>userList users=users level=subLevel}}
{{name}}
{{/each}}
</template>
Template.userList.helpers({
subLevel: function() {
return this + 1;
}
});
but it's not working, do you have any idea ?
Technically, I'm calling recursively a template, and I'd like to know at what level my template is.
I'm not sure what you're trying to do but this doesn't look right. A template calling itself leads to an infinite loop. For example, create a new meteor project and try to call {{> hello}} inside "hello" template. It doesn't work.
<head>
<title>test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
{{> hello}}
</template>
There must be another way to do what you're trying to do...
<template name="overview">
{{> userList users=users level=0}}
</template>
<template name="userList">
{{#each users}}
<div class=level>
{{>userList users=users level=subLevel}}
{{name}}
{{/each}}
</template>
Because you have enclosed level variable in double quotes that will not be evaluated.
Ok, I finally found that the best way to achieve that was to add a level key in my array of users instead of passing it with a parameter. Spacebars seems to no be able to achieve what I wanted initially.
I'm new with meteor and at the moment i'm testing out nested templates. More specific, i'm trying to get this pseudo switch working.
I have a PARENT template that gets data from a template.helper function where it gets the data for the {{#each}}.
This is the PARENT template
<template name="result">
{{#each Tresult}}
<div class="jow">
<h3>{{name}}</h3>
<p>{{type}}</p>
<div>{{> Tstatus}}</div>
</div>
{{/each}}
</template>
The PARENT also includes another template {{> Tstatus}}
This is the CHILD template
<template name="Tstatus">
{{#status_is "green"}}
{{> Tstatus_green}}
{{/status_is}}
{{#status_is "red"}}
{{> Tstatus__red}}
{{/status_is}}
{{#status_is "orange"}}
{{> Tstatus__orange}}
{{/status_is}}
</template>
<template name="Tstatus_green">
<span>green</span>
</template>
<template name="Tstatus_red">
<span>red</span>
</template>
<template name="Tstatus_orange">
<span>orange {{number}}</span>
</template>
This template can also include 3 other templates:
Tstatus_green
Tstatus_red
Tstatus_orange
But the problem is, how do i get this pseudo switch working. So i only need to include 1 of the 3 templates, based on it's status color.
And this is the helper function for the PARENT template
Template.result.helpers({
Tresult:function(){
return Ttable.find()
}
})
I would do something like this:
Template.Tstatus.helpers({
getStatusColor:function()
{
//"this" will be the current Ttable document
var color = getColorFunction(this)
return Template["Tstatus_"+color]
}
})
<template name="Tstatus">
{{#with getStatusColor}}
{{>.}}
{{/with}}
</template>
Say I have a Meteor application which displays widgets. A widget can have one of several forms:
<template name="textWidget">
<h1>{{myTitle}}</h1>
<p>{{myTextContent}}</p>
</template>
<template name="imgWidget">
<h1>{{myTitle}}</h1>
<img src="{{myImagePath}}" />
</template>
<template name="listWidget">
<h1>{{myTitle}}</h1>
<ul>
{{#each items}}
{{> listWidgetItem}}
{{/each}}
</ul>
</template>
Is there a good pattern for rendering a specific template given a record type?
Naively, I can do something like:
<template name="masterTemplate">
{{#each widgets}}
{{#if widgetType "text"}}
{{> textWidget}}
{{else}}
{{#if widgetType "img"}}
{{> imgWidget}}
{{else}}
{{if ... }} ... {{/if}}
{{/if}}
{{#/if}}
{{/each}}
</template>
With a helper like:
Template.masterTemplate.widgetType = function(cmp) {
return cmp === this.data.type;
};
This seems like a very clunky and unflexible way to operate though. Am I missing an obvious library or design pattern for this use case?
You can try something like this:
UI.registerHelper('widget', function () {
var templateName = this.data.type + 'Widget';
return Template[templateName].extend({ data: this });
});
and you can use it as follows:
{{> widget context}}
or
{{#with context}}
{{> widget}}
{{/with}}
Handlebar conditioning seems not to be working in attributes.
in the .js
if (Meteor.isClient){
Template.cards.myCards = function()
{
return ["something.png"];
}
Template.card.isSelected = function()
{
return true;
};
}
in the .html
<head>
<title>test</title>
</head>
<body>
{{>cards}}
</body>
<template name="cards">
{{#each myCards}}
{{>card}}
{{/each}}
</template>
<template name="card">
<div class="{{#if isSelected}}selectedClass{{/if}}">
{{#if isSelected}}selectedContent{{/if}}
</div>
</template>
Gives me (once rendered)
<div class="<!--data:DQhTaW3zefLpaZQ2k-->">
selectedContent
</div>
Where is my "selectedClass" gone ? Why is it replaced by the commented data block ?
Take the code on GitHub
Problem recognised as a bug and issue closed the problem has been fixed in Blaze
I have three simple Templates in Meteor, and a Collection on the server with any combination of their names. I want to be able to render these templates dynamically based on which of their names are in the Collection.
Currently I am trying to accomplish this by using the client to subscribe to the Collection, and access the names through a template function. Unfortunately, if I try to run ">" on the names, Meteor attempts to render the variable name instead of the Template pointed to by its value.
So instead of rendering the html in template1, template2, and template3, the output is merely their names on the page: "template1 template2 template3".
Here is the code I've been using, I hope there's a way to solve my issue without having to run Meteor.render manually.
Server js:
TemplatesToRender = new Meteor.Collection("templatesToRender");
TemplatesToRender.insert({templateName: "template3"});
TemplatesToRender.insert({templateName: "template2"});
Client html:
<body>
{{#each templatesToRender}}
{{> templateName}} // meteor trying to render a template
// called "templateName" instead of the
// variable inside templateName.
{{/each}}
</body>
<template name="template1">
<span>Template 1</span>
</template>
<template name="template2">
<span>Template 2</span>
</template>
<template name="template3">
<span>Template 3</span>
</template>
You can make a render helper:
Handlebars.registerHelper('render', function(name, options) {
if (Template[name])
return new Handlebars.SafeString(Template[name]());
});
And use it with
{{render templateName}}
You might want to try this
in your html
<body>
{{> templateToRender}}
</body>
<template name="templateToRender">
{{! use below to detect which template to render}}
{{#if templateName "template1"}}
{{> template1}}
{{/if}}
{{#if templateName "template2"}}
{{> template3}}
{{/if}}
{{#if templateName "template3"}}
{{> template3}}
{{/if}}
</template
<template name="template1">
<p>this is template1</p>
</template>
<template name="template2">
<p>this is template2</p>
</template>
<template name="template3">
<p>this is template3</p>
</template>
in your script
Template.templateToRender.templateName = (which) ->
# if user have a field like templateName you can do things like
tmplName = Meteor.user().templateName
# Session.equals will cause a template render if condition is true.
Session.equals which, tmplName
Meteor 1.0 just came out today, and I just want to update this for 2014 :)
https://docs.meteor.com/#/full/template_dynamic
{{> Template.dynamic template=template [data=data] }}
Sample Usage:
{{#each kitten}}
{{> Template.dynamic template=kitten_type data=this }}
{{/each}}