We Keep Coding

Meteor: How to use handlebars within handlebars

I would like to use to refer to another template within an {{#each}} loop
html:
{{#each listOfItems}}
{{>{{variableOne}}}}
{{/each}}
which should render
<Template name="one">
One
</Template>
or
<Template name="two">
Two
</Template>
depending on the js
other tried syntax include
{{>'{{variableOne}}'}}
or
{{>Template.dynamic template={{variableOne}}}}
Any help or workaround greatly appreciated!

Not sure what are you trying to accomplish. I'm assuming you are using Blaze rendering engine. If you want to pass parameters try this:
{{#each}}
{{> TemplateName variable=variable}}
{{/each}}
Or if you want to show certain template depending on variable value try this (watch out - eq is meant as global helper for comparing values):
{{#each}}
{{#if variable eq 1}}
{{> TemplateOne}}
{{else}}
{{> TemplateTwo}}
{{/if}}
{{/each}}

Assuming that the list you iterate over contains the template names, this will get you what you want:
html:
<template name="hello">
{{#each template in myTemplates}}
{{> Template.dynamic template=template }}
{{/each}}
</template>
<template name='foo'>foo-template</template>
<template name='bar'>bar-template</template>
js:
Template.hello.helpers({
myTemplates() {
return ['foo', 'bar'];
},
});

Is it possible to switch collection focus in Meteor spacebars templates?

I am trying to display some relational data in a Meteor spacebars template. Specifically I two collections, Location and Weather. They look something like this:
Location {
_id: 'full-name',
title: 'Full name',
lat: '123.456',
long: '123.456',
order: 1
}
Weather {
locName: 'full-name', // this name always matches a location _id
temperature: '41.3'
}
I'd like to display information from both of these collections on a single page. So that I can show the latest weather from each location (there are 4-20 of them per page). To do this, I've published a Mongo request of both collections like so on the server side:
Meteor.publish('allLocations', function() {
return [
Locations.find({}, { sort: { order: 1 } }),
Weather.find({}) // The weather
]
});
I then subscribe to this publication in my router (iron-router):
Router.map(function() {
this.route('locations', {
waitOn: function () {
return Meteor.subscribe('allLocations');
}
}
});
However, I get stuck when I get to my spacebars template. I can't figure out the syntax for switching collection focus in spacebars.
Here's the psuedo-code for the template that I'm trying to parse, but I know that this doesn't currently work.
<template name="locations">
<div class="locations-grid">
{{#each locations}}
<div class="location {{_id}}">
This is the location template
<h1>{{title}}</h1>
{{#each weather}}
<!-- Trying to pass the _id along to the weather template for filtering -->
{{> weather _id}}
{{/each}}
</div>
{{/each}}
</div>
</template>
<template name="weather">
This is the weather template
{{#with weather}}
<!-- Ideally, we've now switched contexts to the weather collection -->
<h2>Temperature: <div class="temp">{{temperature}}</div></h2>
{{/with}}
</template>
So my question is, where do I tell spacebars to switch contexts to the weather collection? How can I pass along the _id variable to the weather template so that I can select the right data from the collection? I know I'm missing a big step here, I just can't figure out which portion of the Meteor space to examine. I know I might need to specify a subscription for the weather template, but I'm not sure where to do that since it's not really a route, since it won't have its own page. It just lives as a sub-template within the locations template.
Thanks for any tips, or possible suggestions on restructuring.

Before we begin, please read A Guide to Meteor Templates & Data Contexts - that will correctly orient you on contexts inside of #each blocks.
Your goal is to join the correct weather documents to their corresponding location documents. This is most easily accomplished by introducing sub-templates for both types. Let's begin with the top-level template:
<template name="locations">
<div class="locations-grid">
{{#each locations}}
{{> location}}
{{/each}}
</div>
</template>
Which has a locations helper like this:
Template.locations.helpers({
locations: function() {
return Locations.find();
}
});
Next, the location template:
<template name="location">
<div class="location">
<h1>{{title}}</h1>
{{#each weathers}}
{{> weather}}
{{/each}}
</div>
</template>
Which has a weather helper like this:
Template.location.helpers({
weathers: function() {
return Weather.find({locName: this._id});
}
});
The key insight here is that the context of a location template is a single location document so weather will return only the weather documents for this location instance. Finally, your weather template can look like:
<template name="weather">
<h2>Temperature: {{temperature}}</h2>
</template>
Note we are now in a weather context so the #with is no longer needed.
Side note - using sort in your publisher has no affect in this case.

Ember {{#with ... controller=...}} gives "Uncaught TypeError: Cannot read property 'lookupFactory' of undefined"

I'm trying to access properties of a controller (actually a mixin extended by a controller) in Ember, and I need to use the {{#with}} handlebars helper. I get the error:
Cannot read property 'lookupFactory' of undefined
The place I'm trying to specify the controller for each looks like this:
{{#with orders.order controller='ordersIndex'}}
I have also tried just about every combination I can think of:
{{#with orders.order controller='orders'}}
{{#with orders.order controller='Orders'}}
Tried specifying the controller for the route that seems to work:
{{#with orders.order controller='brokerageAccount'}}
{{#with orders.order controller='BrokerageAccount'}}
{{#with orders.order controller='Brokerage'}}
No luck with any of them.
All Code is in JSBin:
http://emberjs.jsbin.com/cabak/1/edit?html,js
Output view of the two routes:
Broken one: (here if you open the console, you'll see the error)
http://emberjs.jsbin.com/cabak/1#/orders
This one works: you'll see some data.
http://emberjs.jsbin.com/cabak/1#/orders/tradier/12345

I guess there is a bug with the {{with}} helper, because if you use the {{#each elem in model}} and update the {{with}} to use the elem variable: {{#with elem.orders.order controller='ordersIndex'}} all works.
This is the updated orders/index template:
<script type="text/x-handlebars" data-template-name="orders/index">
<div class="inline-headers">
<h4><label>Brokerage: </label>{{titleize brokerage}}</h4>
</div>
{{#each elem in model}}
<h4 class="account-header"><label>Account: </label>{{account_number}}</h4>
{{#with elem.orders.order controller='ordersIndex'}}
{{partial "_orders_table"}}
{{/with}}
{{/each}}
</script>
And this is the updated jsbin http://emberjs.jsbin.com/piwuyare/1#/orders

If statement within another if statement in Handlebars templates

These are all objects which I am passing to the handlebars template.
self.template = template({ data: self.model, lang:self.lang, page:self.mainPage, subpage:self.param });
Then inside foreach loop I have an if statement where I am not able to access the parent context element. The code which i have inside the template and the problem is shown bellow:
{{#each data}}
<h1>{{../subpage}}</h1> --> This is giving me a subpage value
{{#if this.brand}}
{{#if ../subpage}}
<h1>WHY IS THIS NOT SHOWING?</h1> --> This is what i am trying to achieve
{{/if}}
{{/if}}
{{/each}}
Any ideas how to achieve this? Thank you very much for all answers/comments!

{{#if this.brand}} goes down into context another level, so you must escape to the parent context not once, but twice.
Your template should thus be:
{{#each data}}
<h1>{{../subpage}}</h1>
{{#if this.brand}}
{{#if ../../subpage}}
<h1>This shows now!</h1>
{{/if}}
{{/if}}
{{/each}}
This should work with a self.model value similar to:
[
{
brand: "Brand A",
otherFields: "here"
}
]
Here is a jsFiddle that demonstrates the solution: nested if statement context escaping
I hope that helps!

Meteor: Re-use template with different data

I've got a few templates which list items (log lines, users) and style them accordingly in tables. Now I've added a "search" page which searches for a string in different item types and displays them on one page. In terms of layout, I want to reuse the original templates, but obviously with the data returned by the search.
How can I do that without duplicating the template itself in the HTML file?
Put another way: How can I use the actual data from the top-level template in the sub-templates.
Small example:
<template name="user_list">
{{#each user_list}}
</template>
<template name="users">
{{> user_list}}
</template>
<template name="search">
{{> user_list}}
{{> group_list}}
</template>
In .coffee:
Template.users.user_list = ->
[a,b,c,d]
Template.search.user_list = ->
[b,c]
Maybe this is an easy one, which would show how little I really understood about Meteor.

Just put the template you want to use inside the {{#each}} statement. Then each item in the array will be the context for that inner template.
HTML file
<template name="users">
<ul>
{{#each UserArr}}
{{> userItem}}
{{/each}}
</ul>
</template>
<template name="userItem">
<li>{{username}} {{profile.name}}</li>
</template>
JS file
Template.users.UserArr = function()
{
return Meteor.users.find({});
};

another solution is to put your request in a Session attribute and check for its existence when querying for the users. By default Session.get("userQuery") would return undefined but once you enter something in the search field you change that with Session.set("userQuery", {type: "something"})
Now in the coffeescript you could say:
Template.users.user_list = ->
if(Session.get("userQuery"))
[a,b,c,d]
else
[b,c]
or alternatively use a MiniMongo query because it is much nicer :-)
the nice thing is that your HTML will rerender because it is reactive to the Session's content.