流星：在嵌套模板检测事件

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