流星JS-在特定模板上顯示DOM元素

Question

我使用流星js做我的第一個應用程序，我需要有關在特定模板上顯示元素的建議。 我的標題保留在所有模板和內容div上，其中模板使用鐵路由器進行交換。 我在標題上有兩個按鈕，這些按鈕不會顯示在某些模板上，因此我必須在特定模板上隱藏/顯示它。

現在，我為附加到main div onload的每個模板幫助程序功能做了准備。 在該函數中，有一些jQuery hide（）和show（）函數。 我覺得這不是最好的解決方案，我很好奇是否有人使用更好的方法來顯示/隱藏不同模板上的元素。

Answer 1

在不知道實際用例（根據模板顯示和隱藏了什么）的情況下提出建議有點挑戰。

一種方法是為每個模板創建多個布局，並根據路線映射到正確的模板：

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

Answer 2

在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操作，無需大驚小怪，並且完全可以做出反應。