CustomHelper位于{{＃each}}块内 [英] CustomHelper inside {{# each}} block

问题描述

我有一个事情的清单。每件事都有一个_id和名字。

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

我目前正在使用用户界面来允许更改事务包括更改交易分配的事项。像这样：

 输入日期：
 
选择一个问题:(这是罪魁祸首）
 
输入金额：
  

我使用句柄来生成引导程序选择输入每个问题的选项 - 即选择一个问题...这很容易与处理栏{{＃each}}块帮助。所有问题都正确显示为选项，并且每个选项的值都正确分配。到目前为止没有问题...

然而，我想要选择其值与transaction.MatterId相匹配的选项，因为这是一个更新屏幕。为此，我在我的{{＃each}}块中调用自定义的IfEquals助手。句柄模板如下所示：

 < div> Matter：{{transaction.matterId}}< / div> <  - 我可以在这里看到此事。 
< div class ='form-group'> 
< label for =selMatter>个案< / label> 
  {{＃each matters}} 
< option value ='{{_id}}'{{ifEqual _id ../transaction.matterIdselected}}> {{name} }< /选项> 
 {{/每个}} 
< / select> 
< / div> 
  
定制助手是这样的：
 ifEqual：function（obj，value，trueString，falseString）{
 return（（obj === value）？trueString：falseString）; 
} 
  
假设1st < div> 显示一个transaction.MatterId为5。将有一个（并且只有一个）选项的值为5。
 
 
 
在句柄模板中，我尝试了各种可能性尝试获得{ {IfEqual}}正确比较2个值。我尝试了没有../的transaction.matterId来查看它是否可能是上下文问题。没有运气。我试着使用一个句柄子表达式（即使有它自己的帮助函数）。不。 
 
 
 
我没有在{{IfEqual}}助手中获得正确的值，因此，即使匹配< option> 在那里，我不能让把手添加selected属性。  
 
 
以下是我认为合适的地方，但我没有看到我缺少的东西。  http://handlebarsjs.com/expressions.html  
解决方案
好吧，我终于明白了。如果有人遇到这种情况，下面是我的工作原理：
 
 
 
句柄模板： 
 
 
 < div class ='form-group'> 
< label for =selMatter>个案< / label> 
  {{＃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>; 
 
返回myOption; 
}，
  




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

解决方案

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

这篇关于CustomHelper位于{{＃each}}块内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！