2
\$\begingroup\$

This is horrendous.

I'm using lodash's templating engine for this table. Here's the template for an individual record's row. I've got 5 different table and record-types and a view and edit mode for each row:

<script id="individual-template" type="text/template">
<div class="individual<%= typeof isParent !== 'undefined' ? ' parent' : '' %>
                      <%= typeof isChild !== 'undefined' ? ' child' : '' %>
                    <%= typeof isTitle !== 'undefined' ? ' title' : '' %>">
    <% if (typeof isEditing !== 'undefined') { %>
    <input type="text" class="firstname" value="<%= firstname %>"/>
    <input type="text" class="lastname" value="<%= lastname %>"/>
    <% if (group == 1) { %>
    <input type="text" class="ethnicity" value="<%= ethnicity %>"/>
    <input type="text" class="gender" value="<%= gender %>"/>
    <input type="text" class="censusage" value="<%= age %>"/>
    <input type="text" class="relation" value="<%= relation %>"/>
    <input type="text" class="maritalstatus" value="<%= maritalstatus %>"/>
    <input type="text" class="profession" value="<%= profession %>"/>
    <input type="text" class="birthstate" value="<%= birthstate %>"/>
    <input type="text" class="birthstate father" value="<%= birthstateFather %>"/>
    <input type="text" class="birthstate mother" value="<%= birthstateMother %>"/>
    <% } else if (group == 2) { %>
    <input type="text" class="ethnicity" value="<%= ethnicity %>"/>
    <input type="text" class="gender" value="<%= gender %>"/>
    <input type="text" class="censusage" value="<%= age %>"/>
    <input type="text" class="relation" value="<%= relation %>"/>
    <input type="text" class="maritalstatus" value="<%= maritalstatus %>"/>
    <input type="text" class="profession" value="<%= profession %>"/>
    <input type="text" class="birthstate" value="<%= birthstate %>"/>
    <input type="text" class="birthstate father" value="<%= birthstateFather %>"/>
    <input type="text" class="birthstate mother" value="<%= birthstateMother %>"/>
    <% } else if (group == 3) { %>
    <input type="text" class="relation" value="<%= relation %>"/>
    <input type="text" class="gender" value="<%= gender %>"/>
    <input type="text" class="ethnicity" value="<%= ethnicity %>"/>
    <input type="text" class="birthmonth" value="<%= birthmonth %>"/>
    <input type="text" class="birthyear" value="<%= birthyear %>"/>
    <input type="text" class="censusage" value="<%= age %>"/>
    <input type="text" class="maritalstatus" value="<%= maritalstatus %>"/>
    <input type="text" class="marriedyears" value="<%= marriedyears %>"/>
    <input type="text" class="children" value="<%= children %>"/>
    <input type="text" class="children living" value="<%= childrenLiving %>"/>
    <input type="text" class="birthstate" value="<%= birthstate %>"/>
    <input type="text" class="birthstate father" value="<%= birthstateFather %>"/>
    <input type="text" class="birthstate mother" value="<%= birthstateMother %>"/>
    <input type="text" class="profession" value="<%= profession %>"/>
    <% } else if (group == 4) { %>
    <input type="text" class="relation" value="<%= relation %>"/>
    <input type="text" class="gender" value="<%= gender %>"/>
    <input type="text" class="ethnicity" value="<%= ethnicity %>"/>
    <input type="text" class="censusage" value="<%= age %>"/>
    <input type="text" class="maritalstatus" value="<%= maritalstatus %>"/>
    <input type="text" class="birthstate" value="<%= birthstate %>"/>
    <input type="text" class="birthstate father" value="<%= birthstateFather %>"/>
    <input type="text" class="birthstate mother" value="<%= birthstateMother %>"/>
    <input type="text" class="profession" value="<%= profession %>"/>
    <% } else if (group == 5) { %>
    <input type="text" class="relation" value="<%= relation %>"/>
    <input type="text" class="gender" value="<%= gender %>"/>
    <input type="text" class="ethnicity" value="<%= ethnicity %>"/>
    <input type="text" class="censusage" value="<%= age %>"/>
    <input type="text" class="maritalstatus" value="<%= maritalstatus %>"/>
    <input type="text" class="marriedfirst" value="<%= marriedfirst %>"/>
    <input type="text" class="birthstate" value="<%= birthstate %>"/>
    <input type="text" class="birthstate father" value="<%= birthstateFather %>"/>
    <input type="text" class="birthstate mother" value="<%= birthstateMother %>"/>
    <input type="text" class="profession" value="<%= profession %>"/>
    <% } %>
    <input type="text" class="notes" title= value="<%= notes %>"><%= notes %>"/>
    <% } else { %>
    <div class="firstname"><%= firstname %></div>
    <div class="lastname"><%= lastname %></div>
    <% if (group == 1) { %>
    <div class="ethnicity"><%= ethnicity %></div>
    <div class="gender"><%= gender %></div>
    <div class="censusage"><%= age %></div>
    <div class="relation"><%= relation %></div>
    <div class="maritalstatus"><%= married %></div>
    <div class="profession"><%= profession %></div>
    <div class="birthstate"><%= birthstate %></div>
    <div class="birthstate father"><%= birthstateFather %></div>
    <div class="birthstate mother"><%= birthstateMother %></div>
    <% } else if (group == 2) { %>
    <div class="ethnicity"><%= ethnicity %></div>
    <div class="gender"><%= gender %></div>
    <div class="censusage"><%= age %></div>
    <div class="relation"><%= relation %></div>
    <div class="maritalstatus"><%= maritalstatus %></div>
    <div class="profession"><%= profession %></div>
    <div class="birthstate"><%= birthstate %></div>
    <div class="birthstate father"><%= birthstateFather %></div>
    <div class="birthstate mother"><%= birthstateMother %></div>
    <% } else if (group == 3) { %>
    <div class="relation"><%= relation %></div>
    <div class="gender"><%= gender %></div>
    <div class="ethnicity"><%= ethnicity %></div>
    <div class="birthmonth"><%= birthmonth %></div>
    <div class="birthyear"><%= birthyear %></div>
    <div class="censusage"><%= age %></div>
    <div class="maritalstatus"><%= maritalstatus %></div>
    <div class="marriedyears"><%= marriedyears %></div>
    <div class="children"><%= children %></div>
    <div class="children living"><%= childrenLiving %></div>
    <div class="birthstate"><%= birthstate %></div>
    <div class="birthstate father"><%= birthstateFather %></div>
    <div class="birthstate mother"><%= birthstateMother %></div>
    <div class="profession"><%= profession %></div>
    <% } else if (group == 4) { %>
    <div class="relation"><%= relation %></div>
    <div class="gender"><%= gender %></div>
    <div class="ethnicity"><%= ethnicity %></div>
    <div class="censusage"><%= age %></div>
    <div class="maritalstatus"><%= maritalstatus %></div>
    <div class="birthstate"><%= birthstate %></div>
    <div class="birthstate father"><%= birthstateFather %></div>
    <div class="birthstate mother"><%= birthstateMother %></div>
    <div class="profession"><%= profession %></div>
    <% } else if (group == 5) { %>
    <div class="relation"><%= relation %></div>
    <div class="gender"><%= gender %></div>
    <div class="ethnicity"><%= ethnicity %></div>
    <div class="censusage"><%= age %></div>
    <div class="maritalstatus"><%= maritalstatus %></div>
    <div class="marriedfirst"><%= marriedfirst %></div>
    <div class="birthstate"><%= birthstate %></div>
    <div class="birthstate father"><%= birthstateFather %></div>
    <div class="birthstate mother"><%= birthstateMother %></div>
    <div class="profession"><%= profession %></div>
    <% } %>
    <div class="notes" title="<%= notes %>"><%= notes %></div>
    <% } %>
</div>
</script>

And then just using it with:

var records = [
    {
        isParent: true,
        group: 2,  // record row type (1-5, differs per-record)
        firstname: 'Joe',
        lastname: 'Bob',
        ...
    }
]
var individualTemplate = _.template ('#individual-template')
for (var i = 0, l = records.length; i < l; i++) {
    $ ('#something').html (individualTemplate (records [i]))
}

Can I make this any less redundant using better templating? I don't want to move it to manual JavaScript DOM creation.

\$\endgroup\$
3
  • \$\begingroup\$ Wow, yea, this could definitely use some love. Could you expand on the usage? We like concrete data, those give the best reviews. Examples which are too far exemplified are more difficult and may not deliver the answers you're looking for. \$\endgroup\$ Commented Aug 31, 2015 at 22:19
  • \$\begingroup\$ What does group mean? \$\endgroup\$ Commented Aug 31, 2015 at 22:32
  • \$\begingroup\$ @200_success there are 5 different sets of record columns we're dealing with. \$\endgroup\$ Commented Aug 31, 2015 at 22:35

0

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.