Meteor：检测嵌套模板中的事件

Posted 2023-03-08

【中文标题】Meteor：检测嵌套模板中的事件

【英文标题】：Meteor: detecting an event in a nested template

【发布时间】：2014-11-22 02:53:45

【问题描述】：

新手流星问题...

我的代码与此大致相似：

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

问题：在“主页”和“统计页面”中，有没有办法知道用户是否点击了“花式按钮”中的按钮？

（或者这只是在流星中实现事物的错误方式？）

【问题讨论】：

我认为代码需要客户端javascript中的点击处理程序，点击处理程序更新一些反应变量，这将触发模板片段的重绘。

你有javascript代码吗？

【参考方案1】：

非常感谢，@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;
;

【讨论】：

这看起来不错，因为模板不再有条件地依赖 fancyButtonMonitor，这会触发响应性。如果按钮需要具有不同的角色，您可能不希望每个 Session.set() 都重绘模板。

【参考方案2】：

注意：下面的答案将为您提供一个有效的切换按钮和一个共享的切换状态。如果您需要按钮来执行不同的操作，或者根据上下文更改不同的切换布尔值，那么还有更多工作要做。这可能是可能的。

显示中使用的嵌套不会影响模板的内部表示。 Meteor 中的所有模板都在 Template 对象中定义为Template.someTemplateName。每个模板都是一个 JS 对象，包含数据字段、函数和事件处理程序。

因此，dashes in template names are forbidden。

由于流星使用 Javascript 对象中的模板名称作为属性名称，因此模板名称必须遵循 Javascript 命名约定/限制。特别是，破折号在结果代码中看起来像一个减号：

Template.fancy-button.events

并且不会工作。 Javascript 将其读取为 Template.fancy 减去 button.events，而不是作为花式按钮模板的事件处理程序。

至于 Javascript 兼容的名称，http://javascript.crockford.com/code.html 建议：

名称应由 26 个大小写字母组成（A .. Z、a .. z)、10 位数字 (0 .. 9) 和 _（下划线）...

另一个 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>

Meteor 设置点击处理程序的方法是使用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")));
  
);