Meteor JS - 在特定模板上显示 DOM 个元素

Question

我用 meteor js 开发了我的第一个应用程序，我需要有关在特定模板上显示元素的建议。我有 header 用于所有模板和内容 div，其中模板与 iron router 切换。我在 header 上有两个按钮，它们不会在某些模板上显示，所以我必须在特定模板上 hide/show 它。

现在我为附加到主 div onload 的每个模板辅助函数创建了。在该函数中有一些 jQuery hide() 和 show() 函数。我觉得这不是最好的解决方案，我很好奇是否有人对不同模板上的 show/hide 元素使用更好的方法。

Answer 1

在不知道实际 use-case（根据模板显示和隐藏的内容）的情况下提出建议有点困难。

一种方法是为每个模板创建多个布局并根据路线映射到正确的模板：

this.route('home', {
    path: '/',
    template: 'home',
    layoutTemplate: 'homeLayout'
});

您也可以通过路由器为模板设置数据上下文，并将其放置在 CSS 中（因此它不会与 header 模板相关联）。

 this.route('posts', {
  path: '/posts',
  data: function() {
    var foo = 'something';
    return foo;
  }
});

您还可以为每条路线设置一个 session 变量，以便您的 header 助手可以访问 hide/show 基于 session 变量中的内容。

Template.header.helpers({
    someClass: function() {
        var someClass = Session.get('someClass');
        if (someClass) {
          return someClass;
        }
    }
})

Answer 2

在 Meteor 中，您通常不需要执行附加到 div onload 等操作。

假设您的 header 有 3 个项目，其中一个始终存在，还有两个按钮：（为清楚起见，省略了 bootstrap 标记）

<Template name="header">
  <ul>
    <li>Menu item</li>
  </ul>
  <button>Button 1</button>
  <button>Button 2</button>
</template>

然后你可以简单地为header定义一个助手：

Template.header.helpers({
  showButtons: function(){
     return (some logic that evaluates to true or false);
  }
});

然后将你的header修改为：

<Template name="header">
  <ul>
    <li>Menu item</li>
  </ul>
    {{#if showButtons}}
      <button>Button 1</button>
      <button>Button 2</button>
    {{/if}}
</template>

没有 jQuery，没有 DOM 操纵，没有大惊小怪，如果逻辑中的某些条件发生变化并且您需要 show/hide 按钮时完全反应同一条路线。

Meteor JS - 在特定模板上显示 DOM 个元素

Meteor JS - showing DOM elements on specific templates

javascript

meteor

onload