2015-06-28 50 views
0

我正在使用主模板和{{> yield}}语句来呈现我的流星JS页面。这是它的样子:流星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> 

有了它,我使我的实际网页EQ:

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

这一切是功能,因为我使用Iron Router像这样:

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

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

我面临的问题是页面标题没有被渲染。我期望页面标题为“标题”,因为我已将<head> -> <title>定义为“标题”(正如您可以在我的主模板中看到的那样)。

这里的奇怪之处在于所有的CSS都会加载,这表明<head>部分至少部分被渲染。

回答

1

head在一个特殊的过程中呈现。我们把它叫做捆绑缺乏一个更好的词。在该捆绑-进程内容的所有bodyhead元素被放入将被首先服务的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>