CustomHelper位于{{#each}}块内 [英] CustomHelper inside {{# each}} block
问题描述
我有一个交易。每个交易都属于通过事务的_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屋!