{{# each}} 块内的 CustomHelper答案

【问题标题】：CustomHelper inside {{# each}} block{{# each}} 块内的 CustomHelper
【发布时间】：2018-06-03 14:39:33
【问题描述】：

我有一份“事项”清单。每件事都有一个_id和名称。

我有一个“交易”。每笔交易都通过 transaction.matterId 属性引用事务的 _id 属于一个事务。

我目前正在开发一个用户界面，以允许对事务进行更改，包括更改事务被分配到的事项。像这样：

Enter date:

Select a matter:  (this is the culprit)

Enter the amount:

我正在使用车把生成一个 Bootstrap 选择输入，其中每个事项都有一个选项 - 即“选择一个事项...”这很容易通过车把 {{ # each }} 块帮助器完成。所有的事情都正确地显示为选项，并且每个选项的值都被正确分配。目前没问题...

但是，我希望预先选择其值与 transaction.MatterId 匹配的选项，因为这是一个更新屏幕。为此，我在 {{# each }} 块中调用了我的自定义“IfEquals”助手。车把模板是这样的：

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

自定义助手是这样的：

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

假设第一个 <div> 显示一个 transaction.MatterId 为“5”。将有一个（并且只有一个）选项的值为“5”。

在车把模板中，我尝试了各种可能性来尝试让 {{ IfEqual }} 正确比较这两个值。我尝试了没有“../”的 transaction.matterId 以查看它是否可能是上下文问题。没有运气。我尝试使用车把子表达式（即使使用它自己的辅助函数）。没有。

我没有在 {{ IfEqual }} 帮助器中获得正确的值，因此，即使匹配的<option> 存在，我也无法让车把添加“selected”属性。

这是我认为正确的地方，但我没有看到我缺少的东西。 http://handlebarsjs.com/expressions.html

【问题讨论】：

模板对我来说很好。我能想到的唯一原因是如果_id 和transaction.matterId 是不同的类型，例如字符串和数字。
@76484 我认为它们是不同的类型 - 因此，toString() 在我的回答中强制转换，如下所示。我曾尝试在上面的代码中使用原始的 {{ ifEqual }} 帮助器和 .toString()，但车把用 parseError 拒绝它。它不喜欢 .toString()。是否有任何开箱即用的修复，或者我仍然必须求助于如下不同的自定义助手？
修复确实应该在您的数据层中，ID 应该始终是一致的类型。如果这是不可能的，那么我建议创建一个toString 自定义帮助程序，在将您的值传递给ifEqual 帮助程序之前将它们串起来。或者，您可以更新 ifEqual 助手以将 obj 和 value 转换为字符串，但我不喜欢这种方法，因为它使助手有点不诚实。

标签： handlebars.js

【解决方案1】：

嗯，我终于明白了。如果有人遇到这种情况，这对我有用：

车把模板：

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

这是 {{{ makeOption }}} 助手：

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

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

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

    return myOption;
},

【讨论】：