Как обращаться с корпусами коммутаторов в шаблонах Meteor

Ответ 1

Не уверен, что вы пытаетесь вывести, но помощник, который оценивает равенство, скорее всего, будет задействован. Поместите это в один из ваших проектов загруженные JavaScript файлы 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}}">

Если вы хотите 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}}">

Этот пример почти тривиально прост; Im предполагая, что вы используете это как структуру управления для большого шаблона, где вместо чего-то вроде 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 передаются как параметры, а затем анализируются.

Ответ 2

Используйте один шаблон для каждой кнопки и дополнительный динамический шаблон

Помощник шаблона, возвращающий динамический шаблон:

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>