Meteorjs - 從另一個模板

<div id="header"> 
    {{> header}} 
</div> 

<div class="hidden content_box"> 
    {{> content}} 
</div>

「content_box」在一開始隱藏我有以下選擇一個模板的DOM。

模板「標題」有一個按鈕。

<template name="header"> 
    <button id="display_content">Click to display content</button> 
</template>

模板「內容」只是一個簡單的div

<template name="content"> 
    It's me, content 
</template>

當我點擊在標題中的按鈕，我想「秀」 content_box。

我該如何做到這一點？ - 或者更好的是，在需要從另一個模板的事件訪問模板的DOM時，實現此類效果的最佳方法是什麼？

Template.header.events "click button#display_content": (e) -> 
    Template.content.show() ?????

來源

2012-10-31 ericbae

我不知道這是否是做的最好的方式，但在類似的情況我以前做過是使用會話參數存儲div的顯示/隱藏狀態。在你的點擊事件中，你只需要改變會話標誌的值。在要顯示/隱藏div的模板中，您只需返回類名。

實例JS：

Template.header.events({ 
    "click button#display_content": function() { 
     Session.set('contentShow', true); 
    } 
}); 

Template.content.className = function (input) { 
    return Session.equals('contentShow', true) ? '' : 'hidden'; 
};

的Html

<template name="content"> 
    <div class="{{className}} content_box"> 
     It's me, content 
    </div> 
</template>

你需要會話初始化標誌爲false在Meteor.startup()例如Session.set('contentShow', false);。由於會話是反應性的，當您更改會話標誌時，div類名稱將被自動重新評估。

來源

2012-10-31 07:57:43 jtblin

酷！謝謝！這當然會起作用。但是，對於傳統的前端編碼方式來說，這是非常不同的方法（按照傳統，我想我的意思是通過jQuery和HTML進行的流行方式）。喜歡聽別人說什麼，看看是否有其他選擇。 – ericbae

真的，對於你的用例來說相當複雜，在這個例子中，你可能只需在你的點擊事件中執行'$（'。display_content'）。removeClass（'hidden'）'。模板只是佔位符，它們沒有插入到DOM中，因此無法執行您的建議。您將必須以Meteor方式處理複雜的使用案例，例如狀態不會僅僅由onclick事件或標準的jQuery/css選擇器改變。 – jtblin

Meteorjs - 從另一個模板

回答

相關問題