Triple braces yield in a meteor template tag?

markpdev · July 20, 2015, 11:34am

see the triple brace yield below. What does it do exactly?

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

  {{{yield}}}

  <div id="log"></div>
</template>

github.com

alanning/meteor-roles/blob/master/examples/iron-router/client/example.html

<head>
  <title>example-app</title>
</head>

<body>
</body>

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

  {{> yield}}

  <div id="log"></div>
</template>

<template name="layout_no_header">
  {{> yield}}

  <div id="log"></div>
</template>

This file has been truncated. show original

robfallows · July 20, 2015, 11:39am

From the readme:

{{{content}}} - Triple-braced template tags are used to insert raw HTML. Be careful with these! It’s your job to make sure the HTML is safe, either by generating it yourself or sanitizing it if it came from a user input.

lorenzo · July 21, 2015, 7:03am

Thanks for the reply.

I did read that but if that means that “yield” is a variable here, (not indicated in the readme, but as I have seen in another example), I should find it declared somewhere, but it isn’t.

Could you confirm that “yield” should be defined as a variable with some html in it?

Steve · July 21, 2015, 7:33am

yield should be either a context variable or a template helper, containing/returning some html.

markpdev · July 22, 2015, 3:05am

Hi Steve, would you expect some other reference to “yield” in the project if it was a context variable or a template helper?

Steve · July 22, 2015, 7:22am

Definitely. A context variable would be pass as a template parameter, or as a #with parameter, or in Iron Router data() hook. A template helper would be define either in the ‘layout’ template or at global scope using Template.registerHelper().

alanning · July 23, 2015, 4:58am

Hi all, Lawrence sent me an email asking about this. Sorry for the confusion.

Yield is how the various meteor routers typically support “layouts” which are a handy way to define common structure for a page, such as headers and footers.

You can see an example of it in the iron-router dynamic layouts example. There is also a section on layouts in this iron-router tutorial. I can’t link directly to the section but its called, “Specify a Layout”.

Btw, the iron-router example in the meteor-roles repo is probably not the best because I created it while Chris was first writing iron-router and a lot has probably changed since then. If anyone would like to update it to use the current version, that would be much appreciated!