Hello,
I’m starting with flow-router, and i don’t really understand how to use it with Blaze templates…
My old template :
<body>
<div class="container-full">
<div id="map">
{{> googleMap name="map" options=mapOptions}}
</div>
<div id="nav">
{{> searchBar}}
{{> slider}}
</div>
<div id="projects" ">
<ul class="collection ">
{{#each projects}}
{{> project}}
{{/each}}
</ul>
</div>
</div>
</body>
I would like to do something like that :
FlowRouter.route( '/', {
action: function() {
BlazeLayout.render( 'applicationLayout', {
main: 'homeTemplate'
});
},
name: 'home'
});
<template name="applicationLayout">
{{> Template.dynamic template=main}}
</template>
<template name="homeTemplate">
<div class="container-full">
<div id="map">
{{> googleMap name="atlasArchi" options=atlasArchiOptions}}
</div>
<div class="nav">
{{> searchBar}}
{{> slider}}
</div>
<div class="projects">
<ul class="collection">
{{#each projects}}
{{> project}}
{{/each}}
</ul>
</div>
</template>
My problem is the “homeTemplate” that is not rendered correctly.
googlemap is not working, and i don’t access the Projects…
Why i don’t access the projects and how can i do with this kind of template :
Sorry, but i’m little lost. If someone can show me an example, how to use my old template with flow router…
Thanks !
This would be a perfect question to post to Stack Overflow. I’d recommend posting there as well.
First: You are on a correct way!
Two problems:
When using the Blaze / Template.dynamic you get a new DATA to your template.
So without transfering that to your template homeTemplate the values are still not available.
atlasArchiOptions
and
projects
are not initialized.
You can do e.g.:
BlazeLayout.render( 'applicationLayout', {
main: 'homeTemplate', atlasArchiOptions: { youroptions: yourvalues }
});
To get projects you need to subscribe to that collection on template level or global?
How do managed that currently?
You may do for simple test:
Template.homeTemplate.helpers({
projects: function() { return Projects.find() }
});
If that works, check for subscriptions and FlowRouter or at least Template base subscriptions.
Good luck
Stack Overflow ? Why not.
@tomfreudenberg
Thank you very much, problem solved !
Actually, I guess my problem was to use the Template.body.helpers or Template.body.something for the projects and for the map… So, I created specific templates and used Template.projectsList.helpers and Template.atlas.helpers…
I followed your advice to improve the projects display, and use {{#if Template.subscriptionsReady}} .
Template.projectsList.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('projects', Session.get('slider'));
});
});
Template.projectsList.helpers({
projects: function() {
return Projects.find();
}
});
template :
<template name="projectsList">
<ul class="collection">
{{#if Template.subscriptionsReady}}
{{#if projects}}
{{#each projects}}
<li>
{{name}}
</li>
{{/each}}
{{else}}
//not found
{{/if}}
{{else}}
//loader
{{/if}}
</ul>
</template>
Map options :
Template.atlas.helpers({
atlasArchiOptions: function() {
if (GoogleMaps.loaded()) {
console.log('mainlayout');
// Map initialization options
return {
styles: style,
etc: etc
};
}
}
});
Map template :
<template name="atlas">
<div id="map">
{{> googleMap name="atlasArchi" options=atlasArchiOptions}}
</div>
</template>
mainLayout :
<template name="mainLayout">
<head>
<title>AtlasArchi</title>
</head>
<body>
<div class="container-full">
{{>Template.dynamic template=content}}
{{>Template.dynamic template=map}}
</div>
</body>
</template>
Routing :
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("mainLayout", {
content: "home",
map: "atlas"
});
}
});
Thanks !