Question

我只是创建了一个流星项目，并从示例'基本'文件（在https://github.com/EventedMind/iron-router/tree/devel/examples/basic找到）中复制/粘贴，取代了Meteor项目.html和.js文件。

在HTML上，该示例未能包含任何模板包含，因此我添加了{{＆gt; Home}}并在'body'块之间运行Meteor。

<body>
 {{> Home}}
</body>

完整的HTML代码是：基本

<body>
{{> Home}}
</body>

<template name="Home">
  <h1>Home</h1>
    {{> Nav}}
  <p>
    Data Title: {{title}}
  </p>
</template>

<template name="One">
  <h1>Page One</h1>
   {{> Nav}}
</template>

<template name="Two">
  {{> Nav}}

  <h1>Page Two</h1>
</template>

 <template name="Nav">
  <ul>
    <li>
  <a href="/">Home</a>
    </li>
    <li>
  <a href="/One">Page One</a>
</li>
<li>
  <a href="/Two">Page Two</a>
    </li>
  </ul>
</template>

.js代码与示例完全相同。

但是，在运行时，它无法更改或路由到第一页和第二页。它只是呆在家里。

我正在学习如何使用它，但即使是最简单的例子，我似乎也没有做到。我做错了什么？

Answer 1

现在不推荐使用Router.map并将其替换为Router.route，但是，似乎还有一些错误，他们仍在讨论。首先，我发现它们的基本路由功能目前很少有用，所以现在不要使用它，即：

Router.route('/path', function() {
  this.render('pathName');
});

这是由于兼容性问题还是其他原因，我不知道。我找到了一个非常标准的公式，但它似乎工作得非常好，那就是用内置的“路由特定选项”替换该函数，并准确指定你想要的东西，就像使用基本的JSON一样：

Router.route('/path', {
  name: 'pathName',
  path: '/path',
  template: 'templateName',
  data: function () {
    title: 'My Title'
  }
});

注意路径：选项。这不应该是必需的，因为路径被定义为路由器功能的第一个参数，但它们在文档中明确指出您可能需要包含路径：在路由中以实现向后兼容。我相信一旦他们让一切顺利进行，你就可以完全删除它。

此外，如果templateName与/ path相同，则不需要template：选项（就此而言，如果pathName：选项与/ path相同则不应该是必需的），但是我发现包括它们只会让生活变得更轻松，否则它们有时会无法正常运作。

简而言之，当错误消失时，像你这样的简单模板将被调用一行：

Router.route('/one');

最终结果是他们简化了路由的调用和定义方式，但不幸的是，它似乎并没有按计划进行。我希望这可以帮助您理解Router.map和Router.route之间的区别。

另外，您之前的代码的主要问题是您插入了部分{{＆gt;在你的身体标签之间，这是不必要的并且会使事情变得混乱，因为即使流星试图在其间路由并加载其他模板，该部分将始终保持不变。从本质上讲，当Meteor去加载模板“One”时，它必须在模板“Home”之上这样做，这意味着你有两个{{＆gt;导航}}部分加载一次。

Answer 2

使用铁制路由器包时，您必须保留身体标签，或者根本不包括身体标签，我使用布局模板，但不是必需的：

basic.html：

<head>
    <title>basic</title>
</head>

<body>
</body>

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

<template name="Home">
    {{> Nav}}

    <h1>Home</h1>

    <p>
        Data Title: {{title}}
    </p>
</template>

<template name="One">
    {{> Nav}}

    <h1>Page One</h1>
</template>

<template name="Two">
    {{> Nav}}

 <h1>Page Two</h1>
</template>

<template name="Nav">
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
        <li>
            <a href="/one">Page One</a>
        </li>
        <li>
            <a href="/two">Page Two</a>
        </li>
    </ul>
</template>

basic.js：

Router.configure({
    layoutTemplate: 'layout'
});

Router.map(function(){
    this.route('Home', {path: '/', data: {title: 'My title'}});
    this.route('One');
    this.route('Two');
});

现在运作正常。

流星铁路由器的基本例子。无法走路

2 个答案: