流星：检测嵌套模板中的事件 [英] Meteor: detecting an event in a nested template

问题描述

新手流星问题...

我的代码与此类似：

 < template name =花式按钮> 
< p>这是我在几个地方使用的花式按钮！< / p> 
< input type =buttonclass =very-fancyvalue =点击我！ /> 
< / template> 
 
< template name =homepage> 
 {{> fancy-button}} 
 //这里，我希望按钮显示stats页面（go，iron-router，go）
< / template> 
 
< template name =stats-page> 
 {{> fancy-button}} 
 //这里，我希望按钮显示一个警报
< / template> 
  

问题：在首页和统计页面中，有没有办法知道用户在花式按钮中点击了按钮？

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

解决方案

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

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

因此，模板名称中的破折号被禁止。

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

Template.fancy-button.events

，将无法正常工作。 Javascript作为 Template.fancy 减去$ code> button.events ，而不是花式按钮模板的事件处理程序。对于与Javascript兼容的名称， http： //javascript.crockford.com/code.html 建议：

名称应由26个大小写形成字母（A ..
Z，a .. z），10位数字（0 .. 9）和_（underbar）...

另一个Javascript约定是camelCase，其中第一个单词后面的名称中的每个单词都有一个大写字母。我建议这样做，而不是破折号来更改代码如下：

 < template name =fancyButton> 
< p>这是我在几个地方使用的花式按钮！< / p> 
< input type =buttonclass =veryFancyvalue =点击我！ /> 
< / template> 
 
< template name =homePage> 
 {{> fancyButton}} 
 //这里，我希望按钮显示我的stats页面（go，iron-router，go）
 {{#if veryFancyStatus}} 
 {{& ; statsPage}} 
 {{/ if}} 
< / template> 
 
< template name =statsPage> 
 {{> fancyButton}} 
 //这里，我希望按钮显示一个提醒页面
 {{#if veryFancyStatus}} 
 {{> alertPage}} 
 {{/ if}} 
< / template> 
  

设置点击处理程序的Meteor方法是使用事件映射

此外，您可能希望使用帮助更容易在模板中使用会话变量

以下是如何实现切换：

client.js（未测试）

  / initialize veryFancyStatus为0 
 Session.set（veryFancyStatus，0）
 //注册veryFancyStatus，所以我们可以在每个模板中读取
 Handlebars.registerHelper（'veryFancyStatus'，function（input ）{
 return Session.get（veryFancyStatus）; 
}）; 
 //设置一个事件处理程序，以便在任何时候点击一个.veryFancy类元素
 //调用一个函数来切换会话变量veryFancyStatus 
 //这也应该触发重绘有条件的条件是FalseStatus 
 Template.fancyButton.events（{
'click .veryFancy'：function（）{
 Session.set（veryFancyStatus，+（！（Session.get （veryFancyStatus）））; 
} 
}）; 
  

Newbie meteor question...

I've got code vaguely similar to this:

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

Question: in "homepage" and "stats-page", is there any way to know if a user has clicked the button in "fancy-button"?

(Or is this just the wrong way to implement things in meteor?)

解决方案

Note: The answer below will get you a working toggle button, and a single shared toggle status. If you need the button to do different things, or change different toggle booleans, depending on the context, then there is more work to do. It is probably possible.

The nesting used in display does not affect the internal representation of the Templates. All the templates in Meteor get defined in a Template object as Template.someTemplateName. Each template is a JS object containing data fields, functions, and event handlers.

For this reason, dashes in template names are forbidden.

Since meteor uses the template name in a Javascript object as a property name, therefore template names must follow Javascript naming conventions/restrictions. In particular, dash looks like a minus in the resulting code:

Template.fancy-button.events

and won't work. Javascript reads that as Template.fancy minus button.events, not as the events handler for the fancy-button template.

As for Javascript-compatible names, http://javascript.crockford.com/code.html suggests:

Names should be formed from the 26 upper and lower case letters (A .. Z, a .. z), the 10 digits (0 .. 9), and _ (underbar)...

Another Javascript convention is camelCase, where every word in a name after the first word is given a capital letter. I suggest this instead of dash to change your code as follows:

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

The Meteor way to set a click handler is to use event maps

Also, you probably want to be use a helper to make it easier to use session variables in a template

Here is how to implement a toggle:

client.js (untested)

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

这篇关于流星：检测嵌套模板中的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！