Umgang mit Switch Cases in Meteor Templates

Question

Was ist der beste Weg, um einen Switch Case in einer Vorlage zu behandeln (zB: eine Schaltfläche mit 4 möglichen Zuständen)? Es scheint falsch die HTML-out in einen Helfer zu ziehen, aber es fühlt sich genauso schlecht die Logik in die Vorlage zu setzen ...

Edit:

Wie Sie sehen können, setzt die html in einem helper ist alles andere als ideal, aber das Ändern einer Klasse, eines Tag-Namens, von Eigenschaften und Inhalten würde die Vorlage völlig unlesbar machen.

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

Answer 1

nicht sicher, was Sie ausgeben sind versucht, aber ein Helfer, der Gleichheit wertet wird wahrscheinlich beteiligt sein. Setzen Sie diese in einem Projekt des Kunden belastete JavaScript-Dateien:

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

Dann sind Sie so etwas wie eine Switch-Case-Struktur mit if Blöcken und einen equals Helfer erstellen können. Zum Beispiel, wenn Sie den Zustand einer Schaltfläche in einer Variablen sind Speichern btnState und die möglichen Werte sind 1, genannt 2 oder 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}}"> 

Wenn Sie switch wollen - case ‚s Fähigkeit, Kurzschluss weiter Tests, nachdem sie einen wahren Wert treffen, und/oder einen Standardfall am Ende, ist der Weg, dies zu tun, mit einem hässlichen Satz verschachtelter if-else Blöcke:

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

Dieses Beispiel fast trivial einfach ist; Ich gehe davon aus, dass Sie dies als eine Kontrollstruktur für eine große Vorlage verwenden, wo anstelle von etwas wie btn-default Dutzende von Zeilen von HTML.

Wenn Sie es wirklich für kurze Textausschnitte wie CSS-Klassennamen verwenden, können Sie stattdessen einen Helper erstellen, der eine Reihe von Fällen mit einer Reihe von zurückgegebenen Zeichenfolgen abbildet. Zum Beispiel (Coffee):

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

Und es zu verwenden:

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

Lenker erlaubt keine Arrays vorbei oder Gegenstände in Helfer, damit die Verrenkungen mit JSON-Strings als Parameter übergeben und dann analysiert.

Answer 2

Verwenden Sie eine Vorlage pro Button und eine zusätzliche dynamische Vorlage

Ihre Vorlage Helfer, die dynamische Vorlage Rückkehr:

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

Ihre Hauptvorlage, den Aufruf der Vorlage Helfer:

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

Ihre 4 Tasten: