我可以在哪个模板事件中隐藏主模板（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>
   . . .

挑战在于我想在显示其他模板时隐藏主模板中的两个 links/anchor 标签。我有一个 "hide" CSS class 隐藏了一个附加了 class 的元素。

我可以利用什么事件（没有双关语意）来完成这个？

我试过这个：

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

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

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

...但是我在编译时收到错误消息；我不认为我可以从其他模板中引用主模板中的元素，无论如何（或者这可能是我的全部问题）。我在 console/command 提示符 (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.

那么需要什么 change/how 我可以在路由到它们时隐藏那些初始链接吗？

这是我的整个 *.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

这种基于模板隐藏类的方法，感觉不像是解决问题的最 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 步) 组织您的模板。 当您使用 > 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>

Step 3) 既然你有了布局模板，如果有你想要在每一个页面上显示的内容，这很容易。

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

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

In which template event can I hide elements from the main template (Meteor)?

javascript

jquery

templates

meteor

meteor-blaze