CustomHelper inside {{# each}} block

2019-08-24 02:01发布

问题:

I have a list of "matters." Each matter has an _id and name.

I have a "transaction." Every transaction belongs to a matter by reference to the matter's _id via a transaction.matterId property.

I'm presently working on a user interface to allow making changes to the transaction, including changing the matter to which the transaction is assigned. Like this:

Enter date:

Select a matter:  (this is the culprit)

Enter the amount:

I am using handlebars to generate a Bootstrap select input with an option for each matter - i.e., "Select a matter..." This is easily done with handlebars {{ # each }} block helper. All the matters correctly appear as options, and each option's value is correctly assigned. No problem so far...

However, I want the option whose value matches the transaction.MatterId to be pre-selected since this is an update screen. For that, I invoke my custom "IfEquals" helper inside my {{# each }} block. The handlebars template is like this:

<div>Matter: {{ transaction.matterId}}</div>  <-- I can see the matterId here.
<div class='form-group'>
    <label for="selMatter">Case</label>
    <select required id="selMatter" name="matterId" class="form-control">
        {{# each matters }}
            <option value='{{ _id }}' {{ ifEqual _id ../transaction.matterId "selected" "" }} >{{ name }}</option>
        {{/ each }}
    </select>
</div>

The custom helper is this:

ifEqual: function (obj, value, trueString, falseString) {
        return ( (obj===value) ? trueString : falseString );
}

Let's say the 1st <div> shows a transaction.MatterId of "5." There will be one (and only one) option with a value of "5."

In the handlebars template, I have tried all sorts of possibilities to try to get {{ IfEqual }} to properly compare the 2 values. I tried the transaction.matterId without the "../" to see if it might be a context problem. No luck. I tried using a handlebars subexpression (even with its own helper function). Nope.

I am not getting the proper values inside the {{ IfEqual }} helper, and for that reason, even though the matching <option> is there, I can't make handlebars add the "selected" attribute to it.

Here is what I believe to be the right place to look, but I am not seeing what I am missing. http://handlebarsjs.com/expressions.html

回答1:

Well, I got it, finally. If anyone comes across this scenario, here's what worked for me:

handlebars template:

<div class='form-group'>
   <label for="selMatter">Case</label>
   <select required id="selMatter" name="matterId" class="form-control">
      {{# each matters }}
          {{{ makeOption _id ../transaction.matterId name }}}
      {{/ each }}
   </select>
</div>

Here's the {{{ makeOption }}} helper:

makeOption: function (optionValue, dataValue, displayText) {
    myOption = "<option value='" + optionValue  + "'";

    if ( optionValue.toString() === dataValue.toString() )
    myOption += " selected";

    myOption += ">" + displayText + "</option>";

    return myOption;
},