Nested templates

[vladshcherbin]

Hello, @arunoda

Maybe you can share your experience, how do you handle such situations:

we have a basic template, where we have nav and notifications parts + Template.dynamic part:

basic

{{> nav}}
{{> notifications}}
{{> Template.dynamic template=main}}

For most of the templates it's okay to have one part changing. But, what about a case, where we want two dynamic parts. But we still want to have nav and notification parts (we don't want them to rerender).

So it looks smth like this:

example

{{> nav}}
{{> notifications}}
{{> Template.dynamic template=one}}
{{> Template.dynamic template=two}}

Of course, we can create a new layout template and use it, but when navigating from basic to example layout - all notifications and nav parts will rerender.

Is there a way to use in the main part of basic layout a template, that has 2 dynamic parts and render the data there. Some sort of nested Template.dynamic. That way, the nav and notifications parts won't rerender, only the main part will.

Is it possible to do that somehow, what would you do in that situation?

[vladshcherbin]

I tried this and it worked:

<template name="basic">
  {{> notifications}}
  {{> nav}}
  <main>
    {{> Template.dynamic template=main}}
  </main>
</template>

<template name="twoColumns">
  {{> Template.dynamic template=one}}
  {{> Template.dynamic template=two}}
</template>

<template name="left">
  left
</template>

<template name="right">
  right
</template>

and the js part:

action: function () {
  FlowLayout.render('basic', {main: 'twoColumns', one: 'left', two: 'right'})
}

Is it safe to use such constructions?

[vladshcherbin]

I also added some onCreated and onDestroyed callbacks and tried navigation:

// 1
FlowLayout.render('basic', {main: 'orders'})
// 2
FlowLayout.render('basic', {main: 'twoColumns', one: 'left', two: null})
// 3
FlowLayout.render('basic', {main: 'twoColumns', one: 'left', two: 'anotherTemplate'})

It seems, that they work as expected, the basic layout is created once and all the parts are properly created and destroyed.

So, if I am not missing something, this would work fine and we can have a single template, that we can use for one, two, three or more dynamic parts.

If what I did is okay, probably we could add this to readme as an example - this way we can create complex nested templates with only one layout and some nested ones.

[ifell]

+1

[arunoda]

Frankly I didn't test this. We normally render some root template using FlowLayout. Then that template take the reposiblity of rendering the child templates. Usually, we get the data from router directly.

This seems like a new strategy. I quite not sure how it works :D Need to have a look at it.

[vladshcherbin]

@arunoda ok, I've created a repo with readme and deployed a demo app. You can see the onCreated, onRendered and onDestroyed callbacks in the console.

Maybe you can check it and tell, what do you think about it ;)

[elGusto]

I also experimented a lot with this layout system and I can say that it works well !

It just gets complicated when using content blocks, you have to be careful about what you render and how it is rendered.

[JulianKingman]

Hum, I'd really like to use this, but am having issues with templates not rendering. Does this still work for you in with the latest version of blazelayout?

[JulianKingman]

Woops, spoke too soon. I had it nested inside of a {{#with}} statement, and it didn't seem to like that

[Pushplaybang]

Should those all be FlowLayout? Shouldn't they be BlazeLayout ?

[vladshcherbin]

@Pushplaybang it was renamed, I've updated the demo repository / demo app with the latest version.

It works great.

[vladshcherbin]

@arunoda it works really well, can I add this to readme so that we can close 2 issues?

[Pushplaybang]

Yeah this works fantastically, and was exactly what I was looking for @vladshcherbin - thanks had a scratch through your demo repo, was exactly what I was trying to do

I wanted to handle auth in one master template to switch between authed view and a block or public content if the user was logged out, and this did the trick exactly.

[Pushplaybang]

+1 for putting it in the readme, this should be essential reading.

[mazing]

Why is this not working if it is enclosed inside {{#with ...}}?

Normally, I can use

{{#with user}}
  {{> Template.dynamic template=../main}}
{{/with}}

if I want to access main outside my {{#with ...}}

[JulianKingman]

Not sure, I ran into the same problem

[louis-cl]

@mazing , @JulianKingman
It's working for me. I have something like this:

<template name="section">
{{#with ....}}
  {{> Template.dynamic template=../subsection}}
{{/with}}
</template>

With, in route:
BlazeLayout.render( 'mainLayout', { main : 'section', subsection : 'some_content' } )

[Pushplaybang]

@mazing are you sure user is true?