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
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 have a template (navBarContent) that I is passed a "title" when I insert it.
I am then able to access {{title}} within that template, but it is not possible to access it within a {{#contentFor}} block embedded in the navBarContent template:
<template name="map">
{{>navBarContent title="MAP"}}
... other content ...
<template>
<template name="navBarContent ">
{{title}}
{{#contentFor "headerTitle"}}
<h1 class="title">{{title}}</h1>
{{/contentFor}}
</template>
I already tried to "forward" the title:
<template name="navBarContent ">
{{title}}
{{#contentFor "headerTitle" title="MAP"}}
<h1 class="title">{{title}}</h1>
{{/contentFor}}
</template>
which produces the following error:
First argument must be a function, to be called on the rest of the arguments;
EDIT:
Ok. I think the data scopes are a the following:
<template name="layout">
{{> yield "headerTitleRenderedInLayout"}}
{{> yield}}
</template>
<template name='map'>
{{> yield "headerTitleRenderedInTemplate"}}
{{>navBarContent title="PARAMETER_TITLE"}}
</template>
<template name="navBarContent">
{{title}} <!-- output: PARAMETER_TITLE -->
{{#contentFor "headerTitleRenderedInLayout"}}
<h1 class="title">{{title}}</h1> <!-- output: LAYOUT_DATA_TITLE -->
{{/contentFor}}
{{#contentFor "headerTitleRenderedInTemplate"}}
<h1 class="title">{{title}}</h1> <!-- output: TEMPLATE_DATA_TITLE -->
{{/contentFor}}
</template>
Above outputs are produced when I use the following router options:
Router.route('/map', function () {
this.layout("layout", {
data: function() {
return { title: "LAYOUT_DATA_TITLE" }
}
});
this.render('map', {
data: function() {
return { title: "TEMPLATE_DATA_TITLE" }
}
});
});
My app has a navbar that is defined in my main layout and I therefore need to set the datacontext for the layout in my route. So far so good, but I want to set that data context based on the value that I pass via:
{{>navBarContent title="PARAMETER_TITLE"}}
This is just a cosmetic thing, because I prefer to define my navbar content in the different templates rather than the routes.
It works when you pass the data context to the render function because Iron Router handles the contentFor block:
Router.route('/', function() {
this.render('map', {
data: function() {
return { title: 'MAP' }
}
});
});
Then the following template shows MAP twice:
<template name="map">
{{> navBarContent }}
{{> yield 'anotherBlock'}}
</template>
<template name="navBarContent">
<div>
In "map": {{title}}
</div>
{{#contentFor 'anotherBlock'}}
<div>
In contentFor: {{title}}
</div>
{{/contentFor}}
</template>
I am trying to combine 2 beginner classes together (https://www.meteor.com/tutorials/blaze/templates & http://meteortips.com/second-meteor-tutorial/iron-router-part-1/). I have been able to complete both classes individually with no problem.
I am using Iron:Router to route to various templates. I run in to issues when I try to access a template within a template. The proper results do not get displayed on the " aostasks"page.
.js:
Router.route('aostask', {
template: 'aostask'
});
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
Template.registerHelpers('task', function () {
return tasks.find({});
})
};
.html:
<template name= "aostask">
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
<template name="task">
<li>{{text}}</li>
</template>
Result:
A page with the correct headers.However, it does not list the tasks i have in my mongo collection. Is the issue that i am using the registerHelper function incorrectly? Should i be using some other function?
Thanks in advance.
There is typo in your helper name
Template.registerHelper('tasks', function () {
return tasks.find({});
})
};
tasks not task
Your helper is registered with the same name as your template. It should be just 'task'. Template.registerHelpers should be Template.registerHelper
if (Meteor.isClient) {
// This code only runs on the client
Template.registerHelper('task', function () {
return Tasks.find({});
})
};
Hy guys i made this code:
--> places_list.html
<head>
<title>Testing</title>
</head>
<body>
<h1>Testing with places</h1>
{{> places_list}}
</body>
<template name="places_list">
{{#each places}}
{{ name}}
{{/each}}
</template>
enter code here
--> places_list.js
Places = new Meteor.Collection('placesNew');
if(Meteor.is_client){
Template.places_list.places = function(){
return Places.find({},{sort:{name: 1}});
}
}
It appears to be ok, but when i go to the browser to insert some data like this:
Places.insert({name: "New York"});
Nothing change... i thought that it was some thing wrong with mongo, but if i go to the browser and try that:
Places.find({},{sort{name: 1}});
I can see the data i've inputed...where is my mistake? what's wrong with this small and disturbing code?....
thanks!
In your places_list.js you should have isClient instead of is_client.
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 }
});