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

【问题标题】：Meteor JS - showing DOM elements on specific templatesMeteor JS - 在特定模板上显示 DOM 元素
【发布时间】：2015-05-22 02:28:02
【问题描述】：

我用流星 js 做我的第一个应用程序，我需要关于在特定模板上显示元素的建议。我有所有模板和内容 div 的标题，其中模板与铁路由器切换。我在标题上有两个按钮，它们不会显示在某些模板上，所以我必须在特定模板上隐藏/显示它。

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

【问题讨论】：

您能说明一下您是如何进行路由和模板切换的吗？通常，在许多模板上重复的元素被放在 Iron Router 中的 layoutTemplate 中。如果某些模板不使用与其他模板相同的标题，只需为它们分配一个不带按钮的不同 layoutTemplate。

标签： javascript meteor onload

【解决方案1】：

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

假设您的标题有 3 个项目，一个始终存在和两个按钮：（为了清楚起见，省略了引导标记）

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

然后你可以简单地为标题定义一个帮助器：

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

然后将你的标题修改为：

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

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

【讨论】：

【解决方案2】：

在不了解实际用例（根据模板显示和隐藏的内容）的情况下提出建议有点困难。

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

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

您还可以通过路由器为模板设置数据上下文并使用 CSS 定位它（因此它不与标题模板相关联）。

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

您还可以为每个路由设置一个会话变量，以便您的标头助手可以根据会话变量中的内容访问和隐藏/显示。

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

【讨论】：