Templates 如何处理Meteor模板中的切换情况

在模板中处理开关情况的最佳方法是什么（例如：具有4种可能状态的按钮）？将html提取到助手中似乎是错误的，但将逻辑放入模板中感觉同样糟糕

编辑：

正如您所看到的，将html放在助手中远非理想，但是更改类、标记名、属性和内容会使模板完全不可读

Template.nextMeetup.helpers({
    rsvpButton: function(rsvp) {
        var button;

        switch(rsvp){
            case 'yes':
                button = '<a ' + this.event_url + 'class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I\'m Attending</a>';
            break;
            case 'maybe':
                button = '<a ' + this.event_url + 'class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a>';
            break;
            case 'no':
                button = '<a ' + this.event_url + 'class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I\'m not going</a>';
            break;
            case 'none':
                button = '<a ' + this.event_url + 'class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn\'t decided</a>';
            break;
            default:
                button = '<button class="rsvp signIn btn btn-disabled pull-right">Sign in to RSVP</button>';
        }
        return new Handlebars.SafeString(button);
    }
});

Template.nextMeetup.helpers({
rsvp按钮：功能（rsvp）{
var按钮；
开关（rsvp）{
案例“是”：
按钮='我正在参加'；
打破
“也许”一案：
巴顿=‘我可能会去’；
打破
案件‘否’：
巴顿=‘我不去’；
打破
案例“无”：
按钮='我还没有决定'；
打破
违约：
按钮='登录到RSVP'；
}
返回新把手。安全绳（按钮）；
}
});

不确定要输出什么，但可能会涉及到一个计算相等性的助手。将其放入项目的一个客户端加载的JavaScript文件中：

Template.registerHelper("equals", function (a, b) {
  return (a == b);
});

然后，您可以使用

if

块和新的

equals

助手创建类似于开关盒结构的东西。例如，如果将按钮的状态存储在名为

btnState

的变量中，并且可能的值为

1

、

2

或

3

：

<button class="{{#if equals btnState 1}}btn-active{{/if}}
               {{#if equals btnState 2}}btn-inactive{{/if}}
               {{#if equals btnState 3}}btn-disabled
               {{else}}btn-default{{/if}}">

这个例子几乎非常简单；我假设您正在使用它作为一个大型模板的控制结构，其中不是像

btn default

这样的东西，而是有几十行HTML

如果您真的将其用于CSS类名之类的短文本片段，则可以创建一个帮助器，将一组案例映射为一组要返回的字符串。例如（CoffeeScript）：

使用它：

{{switch btnState "[1,2,3]"
  "[\"btn-active\",\"btn-inactive\",\"btn-disabled\"]" "btn-default"}}

---

Handlebar不允许将数组或对象传递到助手中，因此JSON字符串作为参数传递，然后解析。每个按钮使用一个模板和一个额外的动态模板

您的模板助手，返回动态模板：

Template.nextMeetup.helpers({
    rsvpButtonTemplate: function(rsvp) {
        switch(rsvp){
            case 'yes':   return Template.buttonYes;
            case 'maybe': return Template.buttonMaybe;
            case 'no':    return Template.buttonNo;
            case 'none':  return Template.buttonNone;
        }
    }
});

您的主模板，调用模板帮助程序：

<template name="myPage">
    ...
    {{> rsvpButtonTemplate}}
    ...
</template>

...
{{>rsvpButtonTemplate}
...

您的4个按钮：

<template name="buttonYes">
    <a {{event_url}} class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I'm Attending</a>
</template>
<template name="buttonMaybe">
    <a {{event_url}} class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a>
</template>
<template name="buttonNo">
    <a {{event_url}} class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I'm not going</a>
</template>
<template name="buttonNone">
    <a {{event_url}} class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn't decided</a>
</template>

我参加
我可能会去
我不去
我还没决定
感谢您的深入响应，但正如我担心的答案似乎是：没有好的方法：（在模板中间的I/EF/Twitter已经看起来相当凌乱，并且只有一个属性改变（我打算对类、属性和内容）。”看起来更合理，但看起来很脆弱和做作。我想我希望有一种处理此类内容的常见做法。您仍然可以将内容与逻辑分开。您可以为每个按钮创建一组子模板（部分）。然后，如果您想使用帮助器，请将HTML字符串替换为
Template.btnYes({rsvp:rsvp}
或
Meteor.render（function（）{Template.btnYes（{rsvp:rsvp}}）
。或者制作一个名为
按钮的部分，使用丑陋的if-else块，并为每个按钮包含子部分。通过
{>按钮}将其包含在内
我从未想过从助手内部引用模板，谢谢，我认为这会很好。我认为在一般情况下，
等于
助手是最好的选择。它本质上只是在呈现模板之前为每个可能的值创建布尔变量的快捷方式，例如
isBtnState1
，
isBtnState2等，这是把手推荐的处理简单情况的方法。为了让它对我起作用，我不得不在
equals
语句周围添加括号，比如：
{{{if（equals btnState 1）}btn active{{/if}
。之所以需要这些括号，是因为
equals
是一个子表达式（）
<template name="myPage">
    ...
    {{> rsvpButtonTemplate}}
    ...
</template>

<template name="buttonYes">
    <a {{event_url}} class="rsvp btn btn-success pull-right" title="visit event page" target="_blank"><i class="icon-check"></i> I'm Attending</a>
</template>
<template name="buttonMaybe">
    <a {{event_url}} class="rsvp btn btn-warning pull-right" title="visit event page" target="_blank"><i class="icon-warning-sign"></i> I might go</a>
</template>
<template name="buttonNo">
    <a {{event_url}} class="rsvp btn btn-danger pull-right" title="visit event page" target="_blank"><i class="icon-remove"></i> I'm not going</a>
</template>
<template name="buttonNone">
    <a {{event_url}} class="rsvp btn btn-inverse pull-right" title="visit event page" target="_blank"><i class="icon-spinner"></i> I havn't decided</a>
</template>