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>

问题：在＆＃34;主页＆＃34;和＆＃34; stats-page＆＃34;，有没有办法知道用户是否点击了按钮＆＃34; fancy-button＆＃34;？

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

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

Answer 2

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

显示中使用的嵌套不会影响模板的内部表示。 Meteor中的所有模板都在模板对象中定义为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，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")));
  }
});

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

2 个答案: