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

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
  });
}

所以抱怨的 line:character (8:6) 是这里“$”后面的“(”：

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

Answer 1

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

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

Answer 2

这种基于模板隐藏类的方法，感觉不像是解决问题的最流星方法。话虽如此，我会建议一种更流星的方式。

与其操纵 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 步）组织您的模板。 当你使用 >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>