CODEWITHSUNDEEP
htmltemplatesmeteor
Tim Visser
Tim Visser

Reputation: 923

Meteor JS does not render page title of main template

I am using a main template with a {{> yield}} statement to render my Meteor JS pages. This is how it looks like:

<template name="main">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <link rel="author" href="humans.txt">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">

        <link rel="stylesheet" href="css/spacers.css">
    </head>
    <body>
        <div class="container">
            {{> yield}}
        </div>

        <!-- Bootstrap JS -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</template>

And with it, I render my actual pages e.q.:

<template name="home">
    HOME
</template>

This all is functional because I use Iron Router like so:

Router.configure({
    layoutTemplate: "main",
    notFoundTemplate: "404"
});

Router.route("/", function() {
    this.render("home");
});

The problem I face is that the page title isn't being rendered. I would expect the page title to be "Title" because I have defined <head> -> <title> to be "Title" (as you can see in my main template).

The weird thing here is that all the CSS does load, which indicates that the <head> section is - at least partially - rendered.

Upvotes: 0

Views: 394

Answers (1)

halbgut
halbgut

Reputation: 2386

The head is rendered in a special process. Let's call it bundling for the lack of a better word. In that bundling-process the contents of all body and head elements are put into the HTML that will be served first. iron-router appends the contents of your template to the body after meteor is loaded on the client. These elements are only being searched for on the root level. The link tags are loaded, because most browsers (more or less) don't care where they occur.

I'd do something like this:

client/main.html

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="author" href="humans.txt">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="css/spacers.css">
</head>
<body>
    <!-- Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

client/templates/main.html

<template name="main">
    <div class="container">
        {{> yield}}
    </div>
</template>

Upvotes: 1

Related Questions