Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Not sure what you’re trying to output, but a helper that evaluates equality will likely be involved. Put this in one of your project’s client-loaded JavaScript files:</p> <pre><code>Template.registerHelper("equals", function (a, b) { return (a == b); }); </code></pre> <p>Then you can create something similar to a switch-case structure using <code>if</code> blocks and your new <code>equals</code> helper. For example, if you're storing the state of a button in a variable named <code>btnState</code> and the possible values are <code>1</code>, <code>2</code> or <code>3</code>:</p> <pre><code>&lt;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}}"&gt; </code></pre> <p>If you want <code>switch</code>-<code>case</code>'s ability to short-circuit further tests after it hits a true value, and/or a default case at the end, the way to do so is with an ugly set of nested <code>if</code>-<code>else</code> blocks:</p> <pre><code>&lt;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}}"&gt; </code></pre> <p>This example is almost trivially simple; I’m assuming that you’re using this as a control structure for a large template, where instead of something like <code>btn-default</code> you have dozens of lines of HTML.</p> <p>If you really are using it for short snippets of text like CSS class names, you could instead create a helper that maps a set of cases with a set of strings to be returned. For example (CoffeeScript):</p> <pre><code>Template.registerHelper "switch", (input, cases, output, def) -&gt; # 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 "" </code></pre> <p>And to use it:</p> <pre><code>{{switch btnState "[1,2,3]" "[\"btn-active\",\"btn-inactive\",\"btn-disabled\"]" "btn-default"}} </code></pre> <p>Handlebars doesn’t allow passing arrays or objects into helpers, hence the contortions with JSON strings passed as parameters and then parsed.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload