I currently have what seems to be a very overly complicated underscore template full of conditionals and as the data grows I'm worried the conditions are going to get more and more extreme. Can anyone advise how I could make this template logic a little easier for my inputs, right now I'm running if...else just to make sure a value is either present or not!
An example model
would look like:
{
"id": "4V6",
"name": "LATOUR TRADING LLC",
"exchanges": [
{
"code": "BMD",
"clearingFirm": {
"id": "CF-1",
"name": "ABN AMRO"
}
},
{
"code": "CBOT",
"clearingFirm": {
"id": "AA-7",
"name": "ABN Agro"
}
}],
"contacts": [
{
"clearingFirmId": "CF-1",
"name": "Joe Bloggs",
"email": "joe.bloggs@abnamro.com",
"phone": "0800 ABN ROCKS"
}
]
}
An example exchange
would look like:
[ {
"id" : "CF-1",
"name" : "ABN Amro"
}]
The task is to map the model clearingFirm with the exchange, if no clearingFirm currently exists in the models exchange then null is assigned.
Template Snippet
<div class="contact-screen screen tt is-hidden js-contact">
<% if((exchange.clearingFirm === null)) { %>
<div class="input-field">
<label class="input-field__label" for="name">Name</label>
<input class="input-field__input js-input-field" type="text" name="name">
</div>
<div class="input-field">
<label class="input-field__label" for="telephone">Telephone Number</label>
<input class="input-field__input js-input-field" type="text" name="telephone">
</div>
<div class="input-field">
<label class="input-field__label" for="email">Email Address</label>
<input class="input-field__input js-input-field" type="email" name="email">
</div>
<% } %>
<% if (exchange.clearingFirm !== null) {
_.each(model.contacts, function(contact) { %>
<div class="input-field">
<label class="input-field__label" for="name">Name</label>
<% if((contact.clearingFirmId === exchange.clearingFirm.id)) { %>
<input class="input-field__input js-input-field" type="text" name="name" value="<%= contact.name %>">
<% } else { %>
<input class="input-field__input js-input-field" type="text" name="name">
<% } %>
</div>
<div class="input-field">
<label class="input-field__label" for="telephone">Telephone Number</label>
<% if((contact.clearingFirmId === exchange.clearingFirm.id)) { %>
<input class="input-field__input js-input-field" type="text" name="telephone" value="<%= contact.phone %>">
<% } else { %>
<input class="input-field__input js-input-field" type="text" name="telephone">
<% } %>
</div>
<div class="input-field">
<label class="input-field__label" for="email">Email Address</label>
<% if((contact.clearingFirmId === exchange.clearingFirm.id)) { %>
<input class="input-field__input js-input-field" type="email" name="email" value="<%= contact.email %>">
<% } else { %>
<input class="input-field__input js-input-field" type="text" name="email">
<% } %>
</div>
<% }); %>
<% } %>
<div class="actions">
<input type="submit" class="actions__action action action--submit">
</div>
</div>