FlowRouter + Blaze


#1

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 !


#2

This would be a perfect question to post to Stack Overflow. I’d recommend posting there as well.


#3

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


#4

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 !