Meteor JS 不渲染主模板的页面标题答案

【问题标题】：Meteor JS does not render page title of main templateMeteor JS 不渲染主模板的页面标题
【发布时间】：2015-09-15 02:07:49
【问题描述】：

我正在使用带有 {{> yield}} 语句的主模板来呈现我的 Meteor JS 页面。看起来是这样的：

<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>

有了它，我可以渲染我的实际页面：

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

这一切都很实用，因为我像这样使用Iron Router：

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

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

我面临的问题是页面标题没有被呈现。我希望页面标题为“标题”，因为我已将 <head> -> <title> 定义为“标题”（您可以在我的主模板中看到）。

这里奇怪的是所有 CSS 都加载了，这表明 <head> 部分已 - 至少部分 - 呈现。

【问题讨论】：

标签： html templates meteor

【解决方案1】：

head 在特殊过程中呈现。我们称它为 bundling，因为没有更好的词。在那个捆绑-过程中，所有body 和head 元素的内容被放入将首先提供的HTML。 iron-router 在流星加载到客户端后将模板的内容附加到body。仅在根级别搜索这些元素。 link 标签已加载，因为大多数浏览器（或多或少）不关心它们出现在哪里。

我会这样做：

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>

【讨论】：