12

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

编辑：

如您所见，将 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);
    }
});
4

2 回答 2

11

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

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

if然后，您可以使用块和新equals助手创建类似于 switch-case 结构的东西。例如，如果您将按钮的状态存储在名为的变量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}}">

如果您想要switch-case在达到真值后短路进一步测试的能力，和/或最后的默认情况，那么这样做的方法是使用一组丑陋的嵌套if-else块：

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

这个例子非常简单；我假设您将它用作大型模板的控制结构，而不是像btn-default您有几十行 HTML 的东西。

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

Template.registerHelper "switch", (input, cases, output, def) ->
  # input is the variable we're comparing, i.e. switch(input)
  # cases is an EJSON-stringified array, i.e. case "foo", case "bar"
  # output is an EJSON-stringified array of strings to return for each case
  # def (default) is a string to return if none of the cases are met

  # Validate input, convert EJSON strings into arrays:
  unless input? and _.isString(cases) and _.isString(output)
    return ""
  cases = EJSON.parse cases
  output = EJSON.parse output
  unless _.isArray(cases) and _.isArray(output) and 
    cases.length is output.length
      return ""

  # Evaluate each case, returning as soon as the first case is true:
  for value, index in cases
    return output[index] if input is value

  # If we've made it this far, none of the cases were met; return def (default):
  if def? and _.isString(def) then return def else return ""

并使用它：

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

Handlebars 不允许将数组或对象传递给帮助程序，因此 JSON 字符串作为参数传递然后被解析的扭曲。

于 2013-07-15T02:06:16.413 回答
7

每个按钮使用一个模板和一个额外的动态模板

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

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>

您的 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>
于 2014-07-02T14:02:40.687 回答