Question

我有一个主模板，还有两个通过（Iron）路由显示：

<template name="main">
  <div id="templateMain" name="templateMain">
    <a href="nfnoscar">The Legend of NFN Oscar</a>
    <br/>
    <a href="nfnoscarsdonut">NFN Oscar's donut</a>
  </div>
</template>

<template name="nfnoscar">
  <h1>The True Story of NFN Oscar</h1>
  <h2 class="monospaceboldsmallcap">Come and Listen to a Story About a Man without a first Name</h2>
  <p>Many people wonder how it can be that NFN (No First Name) Oscar Herrera does not have a first name.</p>
  <p>Finally, the secret of his birth name and its subsequent alteration can be revealed.</p>
   . . .

挑战在于我想在显示其他模板时隐藏主模板中的两个链接/锚标记。我有一个“隐藏”的CSS类，它隐藏了一个附加了该类的元素。

我可以利用哪些事件（没有双关语意图）来实现这一目标？

我试过了：

  Template.nfnoscar.onRendered({
    $('#templateMain').addClass('hide');
  });

  Template.nfnoscarsdonut.onRendered({
    $('#templateMain').addClass('hide');
  });

  Template.main.onRendered({
    $('#templateMain').removeClass('hide');
  });

...但是我在编译时遇到错误信息;我认为无论如何我都不能从其他模板中引用主模板中的元素（或者这可能是我的整个问题）。我在控制台/命令提示符（Windows 7）中看到的错误是：

=> Errors prevented startup:

   While processing files with ecmascript (for target web.browser):
   platypus.js:8:6: platypus.js: Unexpected token (8:6)

   While processing files with ecmascript (for target os.windows.x86_32):
   platypus.js:8:6: platypus.js: Unexpected token (8:6)

=> Your application has errors. Waiting for file change.

那么什么需要改变？如何在路由到这些初始链接时隐藏它们？

这是我的整个* .js文件：

Router.route('/');
Router.route('/nfnoscar');
Router.route('/nfnoscarsdonut');

if (Meteor.isClient) {

  Template.nfnoscar.onRendered({
    $('#templateMain').addClass('hide');
  });

  Template.nfnoscarsdonut.onRendered({
    $('#templateMain').addClass('hide');
  });

  Template.main.onRendered({
    $('#templateMain').removeClass('hide');
  });

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

所以抱怨的行：字符（8：6）是“（”在这里的“$”之后：

Template.nfnoscar.onRendered({
  $('#templateMain').addClass('hide');
});

Answer 1

这种基于模板隐藏类的方法，并不是最接近问题的Meteor方法。话虽如此，我会建议一种更流星的方式。

为什么不根据您的路线显示您想要的模板，而不是操纵DOM并隐藏或显示类？（基于http://www.manuel-schoebel.com/blog/iron-router-tutorial）

步骤1：设置路线。

Router.configure({
  layoutTemplate: 'layout'
});
Router.route('/', {
  name: 'main',
  template: 'main'
});
Router.route('/nfnoscar' {
  name: 'nfnoscar',
  template: 'nfnoscar'
});
Router.route('/nfnoscarsdonut' {
  name: 'nfnoscarsdonut',
  template: 'nfnoscarsdonut'
});

步骤2）整理模板。 当您使用＆gt; yield它只显示路径中描述的模板。

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

<template name="main">
  <div id="templateMain" name="templateMain">
    <a href="nfnoscar">The Legend of NFN Oscar</a>
    <br/>
    <a href="nfnoscarsdonut">NFN Oscar's donut</a>
  </div>
</template>
<template name="nfnoscar">
  <h1>The True Story of NFN Oscar</h1>
  <h2 class="monospaceboldsmallcap">Come and Listen to a Story About a Man Named NFN</h2>
  <p>Many people wonder how it can be that NFN (No First Name) Oscar Herrera cannot have a first name.</p>
  <p>Finally, the secret of his birth name and its subsequent alteration can be revealed.</p>

步骤3）现在你已经有了一个布局模板，如果有想要在任何页面上显示的内容，那就很容易了。

<template name='layout'>
  {{> navbar}} // Will display a navbar template on every page
  {{> yield}}
</template>

Answer 2

您遇到语法错误。在JavaScript中，您不能只将代码块传递给函数：您需要显式传递匿名函数，如下所示：

Template.nfnoscar.onRendered(function() {
  $('#templateMain').addClass('hide');
});

我可以在哪个模板事件中隐藏主模板（Meteor）中的元素？

2 个答案: