流星：在嵌套模板檢測事件

Question

新手流星問題...

我有隱約的代碼與此類似：

<template name="fancy-button"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="very-fancy" value="Click Me!" /> 
</template> 

<template name="homepage"> 
    {{> fancy-button}} 
    // here, I want the button to bring up my "stats" page (go, iron-router, go) 
</template> 

<template name="stats-page"> 
    {{> fancy-button}} 
    // here, I want the button to show an alert 
</template> 

問題：在「主頁」和「統計頁「，有什麼方法可以知道用戶是否點擊了」按鈕「按鈕？

（？或者這只是落實在流星的事情錯誤的方式）

Answer 1

注意：下面的答案將讓你的工作切換按鈕，以及一個共享切換狀態。如果你需要按鈕來完成不同的事情，或者根據上下文改變不同的切換布爾值，那麼還有更多的工作要做。這可能是可能的。

顯示中使用的嵌套不會影響模板的內部表示形式。 Meteor中的所有模板都在Template對象中定義爲Template.someTemplateName。每個模板都是一個包含數據字段，函數和事件處理程序的JS對象。

爲此，dashes in template names are forbidden。

由於meteor使用Javascript對象中的模板名稱作爲屬性名稱，因此模板名稱必須遵循Javascript命名約定/限制。特別是，儀表板看起來像在生成的代碼負：

Template.fancy-button.events

，將無法正常工作。 Javascript讀取Template.fancy減去button.events，而不是作爲花哨按鈕模板的事件處理程序。

至於Javascript的兼容名稱，http://javascript.crockford.com/code.html表明：

名稱應該從26個大寫和小寫字母（A .. Z，一.. Z），10個數字來形成（0 ... 9）和_（underbar）...

另一個Javascript約定是camelCase，其中第一個單詞後的名字中的每個單詞都被賦予一個大寫字母。我的建議是，而不是短跑改變你的代碼如下：

<template name="fancyButton"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="veryFancy" value="Click Me!" /> 
</template> 

<template name="homePage"> 
    {{> fancyButton}} 
    // here, I want the button to bring up my "stats" page (go, iron-router, go) 
    {{ #if veryFancyStatus }} 
    {{ > statsPage }} 
    {{ /if }} 
</template> 

<template name="statsPage"> 
    {{> fancyButton}} 
    // here, I want the button to show an alert page 
    {{ #if veryFancyStatus }} 
    {{ > alertPage }} 
    {{ /if }} 
</template> 

流星方法來設置一個單擊處理程序是使用event maps

此外，你可能想使用helper to make it easier to use session variables in a template

下面是如何實現切換：

client.js（未經測試）

// initialize veryFancyStatus to 0 
Session.set("veryFancyStatus",0) 
// register veryFancyStatus so we can read it in every template 
Handlebars.registerHelper('veryFancyStatus',function(input){ 
    return Session.get("veryFancyStatus"); 
}); 
// set up an event handler so that any time a .veryFancy class element is clicked 
// a function is called to toggle the session variable veryFancyStatus 
// this should also trigger redraws in templates that are conditional on veryFancyStatus 
Template.fancyButton.events({ 
    'click .veryFancy': function() { 
    Session.set("veryFancyStatus", +(!(Session.get("veryFancyStatus"))); 
    } 
}); 

Answer 2

非常感謝@paul！我像這樣的東西去：

<template name="fancyButton"> 
    <p>This is a fancy button that I use in several places!</p> 
    <input type="button" class="veryFancy" value="Click Me!" /> 
</template> 

<template name="homePage"> 
    {{> fancyButton}} 
    {{respondToFancyButton}} 
    <!-- here, I want the button to bring up my "stats" page (go, iron-router, go) --> 
</template> 

<template name="statsPage"> 
    {{> fancyButton}} 
    {{respondToFancyButton}} 
    <!-- here, I want the button to show an alert --> 
</template> 

然後，在我的JavaScript客戶端代碼：

Session.set("fancyButtonMonitor", 0); 

Template.fancyButton.events({ 
    'click .veryFancy': function(theEvent, theTemplate) { 
     Session.set("fancyButtonMonitor", 1); 
    } 
}); 

Template.homepage.respondToFancyButton = function() { 
    if (Session.get("fancyButtonMonitor") == 1) { 
     Session.set("fancyButtonMonitor", 0); 
     Router.go('stats'); 
    } 
    return null; 
}; 

Template.statsPage.respondToFancyButton = function() { 
    if (Session.get("fancyButtonMonitor") == 1) { 
     Session.set("fancyButtonMonitor", 0); 
     Router.go('alert'); 
    } 
    return null; 
};