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;
},
Related
So I have an easy-search template:
<template name="searchBox">
<div class="">
{{> EasySearch.Autosuggest index=PlayersIndex }}
</div>
</template>
And I'd like to make the input field look like this (have the following attributes):
<input
type="text"
placeholder="Type to add new player"
ref="textInput"
/>
I've tried adding the attributes to the argument but that doesn't seem to work:
{{> EasySearch.Autosuggest index=PlayersIndex type="text"}}
Any ideas how to achieve this?
Just add attributes property in your HTML:
{{> EasySearch.Input index=index attributes=inputAttributes}}
And in your JS, fill it with your needed data:
`Template.leaderboard.helpers({
inputAttributes: function () {
return { 'class': 'easy-search-input', 'placeholder': 'Start searching...' };
}
)}
`
I was able to find the answer by looking at this repo, so make sure to check github repos as they might contain helpful examples. ;)
Check out ../billerId below. If I put {{ billerId }} before the {{# each }} block, I can see that billerId is there and defined.
I want to user billerId in my custom helper to see if the option's value should be pre-selected.
<select class="searchbar-control col-6 form-control" id="searchbar-select-biller" style="display:none">
<option value=''>Select a biller...</option>
{{# each billers }}
<option value='{{ _id }}' {{ ifEqual _id ../billerId "selected" "" }} >{{ name }}</option>
{{/ each }}
</select>
Here's the helper code:
ifEqual: function (obj, value, trueString, falseString) {
return ( (obj===value) ? trueString : falseString );
},
I have tried various syntaxes: billerId, ../billerId, ../../billerId, {{ billerId }}.
No luck.
Not exactly an answer, but on researching, I don't think Handlebars allows this type of usage.
Instead, I put the billerId in a hidden span and referenced the span by its id from within javascript. I assigned "selected" from within the script.
I define a template which built select dropdown inputs for my forms:
<p id="{{key | ucfirst}}">
<span>{{label}} : </span>
<select required disabled>
{% for d in data %}
<option value="{{attribute(d, optionValue)}}" {{(attribute(d, optionValue) == selectedValue)?'selected'}}>{{attribute(d, optionIntitule)}}</option>
{% endfor %}
</select>
<span><em>{{initialValue | default("")}}</em></span>
</p>
Then I just need to include it, and passing it some data:
{% include 'selectForm.twig' with {'label': 'Manager'
, 'key': context.manager.id
, 'initialValue': projet.manager.username
, 'data': users
, 'keyValue': 'id'
, 'keyIntitule': 'username'
, 'selectedValue': projet.manager.id) }
%}
It works fine, but I want to do more. For instance I would like to show a value more usefull for end user into option's label: <option>Username (email)</option> instead of <option>Username</option>
So I think I can't use anymore the attribute function.
I thought I could pass an expression to my template like following:
{% include 'selectForm.twig' with {..., 'keyIntitule': "#{d.username (d.email)}"} %}
But the expression is evaluated with immediate context, not template's one. So it doesn't work.
I also tried with template_from_string but I don't suceed in (I never used this function before...)
Is there a way to pass an expression to another template, and make it evaluate the expression with it's own context?
If you want to block the immediate context you can use include function instead of include tag. Then you can disable context this way (example taken from the documentation) :
{# only the foo variable will be accessible #}
{{ include('template.html', {foo: 'bar'}, with_context = false) }}
I found the solution with Twig's template_from_string function:
{% include 'selectForm.twig' with {..., 'keyIntitule': template_from_string("{{d.username}} ({{d.email}})")} %}
And then I use keyIntitule variable as a template:
<option value="{{attribute(d, optionValue)}}">{% include(keyIntitule) %}</option>
Works also with:
<option value="{{attribute(d, optionValue)}}">{{ include(keyIntitule) }}</option>
If you working with objects you could set keyIntitule to uniqueName and in the user entity define new method:
public function getUniqueName()
{
return sprintf('%s (%s)', $this->getUsername(), $this->getEmail());
}
Twig will call corresponding getter method. In this case uniqueName transforms to getUniqueName()
I'm curious if I can somehow use dynamic variable names in templates. For example, I'm having a loop, though a type of units in my game:
{{# config.units:unit }}
<input type="text" id="unit_{{unit}}" class="toTrain selectable" value="" placeholder="0" />
{{/ config }}
Where the value of the input should return the value of {{units_1}} for example, which represents the amount of units (type 1).
I could easily do some external object and store the amount of units for each of them but, I was wondering if I can keep the data binded because somewhere in the template there will be a total needed resources which is calculated whith these values.
The only "solution" which came into my head was to get rid of the loop and manually write the units in the template. But, when units change, I also need to change the template, and.. the real template structure for one unit is a bit bigger than this snippet.
Example:
<input value="{{units_1}}" />
<input value="{{units_2}}" />
And I was looking for something like:
<input value="{{'units_'+unit}}" />
Which is obviously not working and not even supposed to work this way. But, thats why I'm here right ? To raise questions.
Regards !
Try to use write getUnit function:
{{# config.units:unit }}
<input type="text" id="{{ getUnit(unit) }}" class="toTrain selectable" value="" placeholder="0" />
{{/ config }}
Component:
Ractive.extend({
init:function(){
self.set("getUnit", function (id) {
return self.get("config.units.unit_"+id);
});
}
})
Trying to implement a popup that allows you to modify an existing database record. As part of this, I have a couple of select boxes that I need to prepopulate with existing selections. This seems harder to do that I first thought. Here's a snippet of what I have as my template
{{#with myExistingRecord}}
<select class="myselect">
{{#each hoursInTheDay}}
{{#if isSelectedHour}}
<option selected>{{this}}</option>
{{else}}
<option>{{this}}</option>
{{/if}}
{{/each}}
</select>
{{/with}}
The problem I run into is in the isSelectedHour template function, because this can't have two definitions (the first being the #each value and the second being the record object). I need to compare the value in the #each loop with the value in my record, and I can't think of an elegant way to do this. I could always set my record value as a Session variable, but that's hacky.
Is there a good, non-hacky way to do this?
I had the same problem, and to my surprise there is a good way to this. You do have access to the outer context in the templating section, and you can use that to pass this to a value to a helper function. I would rewrite your code as follows:
<template name="myTemplate">
{{#with myExistingRecord}}
<select class="myselect">
{{#each hoursInTheDay}}
<option {{selected ../recordHour}}>{{this}}</option>
{{/each}}
</select>
{{/with}}
</template>
And then have a helper function:
Template.myTemplate.selected = function(hour) {
if (hour == currentHour)
{ return "selected ";}
else
{ return "";}
};
Look here for details on how the ../ notation works.
In the end I decided to create a simple Handlebars helper to handle this. If anyone wants to do something similar, here's the helper code:
Handlebars.registerHelper('hourOptions', function(selectedHour) {
var html = '';
for (var hr = 0; hr < 24; hr++) {
if (hr === selectedHour)
html += '<option selected>' + hr + '</option>';
else
html += '<option>' + hr + '</option>';
}
return new Handlebars.SafeString(html);
});
And the template code becomes
{{#with myExistingRecord}}
<select class="myselect">
{{hourOptions mySelectedHour}}
</select>
{{/with}}