如何将登陆页面添加到 Meteor 应用程序？答案

【问题标题】：How To Add A Landing Page To A Meteor App?如何将登陆页面添加到 Meteor 应用程序？
【发布时间】：2016-10-23 00:03:38
【问题描述】：

routes.js

Router.route('/', function () {
  this.render('Home');
});
Router.route('wall', function () {
  this.render('Wall');
});

landing.html

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

drawingApp.html

<body>
{{> wall}}
</body>

<template name="wall">
... 
{{> canvas}}
...    
</template>
<template name="canvas">
...
</template>

drawingApp.js

...
Template.wall.events({
...

如果我包含 <body> {{> wall}} </body>，则着陆页会呈现在应用下方。如果我删除<body> {{> wall}} </body>，登陆页面会正确呈现，但是当点击按钮进入时，它会打开一个无法运行的应用程序。（自从第一次发布尝试了很多事情后进行了编辑，但核心问题保持不变）。有任何想法吗？谢谢你。

【问题讨论】：

你在使用iron-router吗？如果是这样，请去掉 <head> 和 <body> 标签。 Iron 路由器在路线上添加了自己的头部/身体。看看这是否适合你。
是的，我正在使用 Iron:router。我将头部中的脚本标签拉出并添加到流星包中，但 home.html 仍然呈现在应用程序下方。如果我去掉 {{> wall}} ，我的绘图应用就会失去功能。
例如.js中Template.wall.events({ "click button.clear": function (event) { Meteor.call('clear', function() { canvas.clear(); }); }, "click button.darkblue": function () { lastX=0; lastY=0; strokeColor = "darkblue"; opacity = "1"; },

标签： templates meteor canvas routing

【解决方案1】：

您需要从正文标签中删除呼叫墙模板。

所以你的 wall.html 将是：

<head>
  <title>LKG Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
</head>

<body>
</body>

<template name="wall">

<!-- <h1>{{title}}</h1> -->
  <div id="settings">
    <div>
      <button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
      <button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
      ...
    </div>    

  <div id="settings">
    <button class='thinnest'>1</button>
    ...   
  </div>

  <div id="settings">
    <button class='shade'>3%</button>
  </div>

{{> canvas}}

</template>

<template name="canvas">
<div class="centerize">
    <div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
    <br>
    <input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <div id="previewImage"></div>
</div>
</template>

【讨论】：

这是我尝试的第一件事。当我删除 {{> wall}}
抱歉，我的意思是当我删除 {{> wall}} 时，我的应用程序中的所有功能都会丢失。

【解决方案2】：

这个方法怎么样：

router.js

Router.route ( '/', {
    name:'home',
    layoutTemplate:'index',
});

Router.route('/wall', {
  name:'wall',
   layoutTemplate:'index',
});

home.html 保持原样，没有变化：

<template name="home">
    <div class="container">
      <div class="jumbotron">
        <h1>Heading</h1> 
        <p>Some text here.</p> 
      </div>
      <div>
          <div class="centerize">
            <a class="btn btn-primary btn-lg" href="wall" role="button">Draw</a></div>
      </div>
    </div>
</template>

wall.html，删除了<body> 的东西

<template name="wall">

<!-- <h1>{{title}}</h1> -->
  <div id="settings">
    <div>
      <button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
      <button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
      ...
    </div>    

  <div id="settings">
    <button class='thinnest'>1</button>
    ...   
  </div>

  <div id="settings">
    <button class='shade'>3%</button>
  </div>

{{> canvas}}

</template>

<template name="canvas">
<div class="centerize">
    <div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
    <br>
    <input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <div id="previewImage"></div>
</div>
</template>

index.html

<template name="index">
     {{> yield}}
</template>

Index.html 基本上包含将在 yield 区域中呈现的其他路由。

【讨论】：

感谢蓝人的努力。但是，当我实现上述内容时，我的绘图应用程序失去了功能。每当我摆脱 <body> {{> wall}} </body> 时，它都会禁用我的应用程序中的功能。也许我应该尝试另一种方法来在应用程序之前加载登陆页面？也许不使用铁：路由器会工作。我正在研究它，但我自己还没有提出任何好的想法。再次感谢您的尝试！非常感谢。