CODEWITHSUNDEEP
meteoriron-router
Loren
Loren

Reputation: 14836

How to reuse layoutTemplate between routes?

Looking at devtools profiling, when I move between two routes with the same layoutTemplate, the layout's helpers are being rerun, and it looks like the HTML is being rerendered as well. How can I have iron router only render the yields and leave the layout alone?

EDIT code:

Router.map ->
  @route '/foo',
    layoutTemplate: 'headered'

  @route '/bar',
    layoutTemplate: 'headered'

Template.headered.helpers 
  test: ->
    console.log 'gets run when switching from /foo to /bar'

<template name="headered">
  {{test}}

  <header>
    {{getReactiveData}}
  </header>

  {{> yield}}
</template>

I don't want the <header> node to be rerendered. I don't want getReactiveData to be called when the route changes (only when the data changes).

Upvotes: 1

Views: 65

Answers (2)

Loren
Loren

Reputation: 14836

There's something abnormal about my app, because IR doesn't normally rerender the layout between routes:

http://meteorpad.com/pad/qcu8QWASvPEjDEf5k/IR

Upvotes: 0

fuzzybabybunny
fuzzybabybunny

Reputation: 5254

The code in layoutTemplate renders and the helpers and callbacks will always rerun because it needs to at least re-run the {{> yield}} that's nested inside it. Otherwise there's no point in using a layoutTemplate.

If you have code that should only run once I suggest breaking it out into another template that just sort of sits around and doesn't change as you go from path to path. layoutTemplate code reruns because it has to.

edit - The following might not work, but I think it should - edit

Another thing that you can try is put the code into Template.layout.onCreated(); The template gets created once and can get re-rendered multiple times before you destroy it by navigating to a page that doesn't use that particular template.

header template

<template name="header">

</template>

Template.header.onRendered(function(){

});

Template.header.events({

});

Template.header.helpers({

});

<template name="layout">
  {{> header }}
  {{> yield }}
</template>

Upvotes: 1

Related Questions