Question

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>，则会正确显示着陆页，但是当点击按钮进入时，它会打开一个无效的应用。（自首次发布以来编辑过很多东西，但核心问题仍然相同）。有任何想法吗？谢谢。

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

Answer 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区域中呈现的其他路线。

如何将着陆页添加到流星应用程序？

2 个答案: