patternjavascriptMinor

How clean is this mustache template for a listing page?

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

thistemplatelistingforpagehowmustacheclean

Problem

This was our old site that I am redesigning.

Someone else hardcoded with inline CSS and javascript in tables.

I wanted to make it dynamic, so I added Mustache and made this template:

{{#labs}}
  
    {{{lab}}}
    
      {{#stadt}}
        {{{stadt}}}
        
      {{/stadt}}

      {{#telefon}}
        {{{telefon}}}
        
      {{/telefon}}

      {{#webseite}}
        
        
          {{{webseite}}}
        
      {{/webseite}}
    
  
{{/labs}}

Here is some of the JSON file:

{ "labs" : [
{ 
    "lab":"Rißmann Zahntechnik GmbH",
    "stadt":"D-06917 Jessen",
    "telefon":"+49 (0) 3537 21 38 61",
    "webseite":"www.rissmann-zahntechnik.de"
  },

Would it make a big enough difference to not have the full word as the name? So maybe like "l" instead of "lab" and "w" instead of "webseite", etc.

Here is the result of the listings:

The even spacing between the icon and the values was achieved by this CSS rule:

.lab i { width: 27px; }

Also, does it make sense to have it in a single

tag, or should I consider placing each value in its own ``?

Solution

By using excessive markup for presentational purposes, the template is the exact opposite of clean.

{{{telefon}}}

vs.

{{{telefon}}}

If you're not able to do this because of a library you're depending on, my recommendation is to find a better library.

By moving away from tables, you've committed a sin that's just as bad as using tables for layout: you're using non-tabular markup for tabular data. It is understandable that you don't want it to look like a table (either for aesthetic or responsive reasons), but tables don't have to look like tables any more than a list has to look like a list.

Go back to using tables and make adjustments to your CSS instead:

http://jsfiddle.net/SGK8Q/

What the markup should end up looking similar to this:


    
        
            Lab
            Contact
            Phone
            Website
        
    

    
        
            ABC
            Johnny
            555-1234
            http://abc.example.com/
        

        
            DEF
            Billy
            555-1234
            http://def.example.com/
        

        
            GHI
            Dave
            555-1234
            http://abc.example.com/

The CSS:

table, tbody, tr, td, th {
    display: block;
}

thead {
    display: none;
}

/* everything past here is optional */
tr + tr {
    margin-top: 1em;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.url {
    color: blue;
    text-decoration: underline;
}

Code Snippets

<span><i class="fa fa-phone"></i></span><span>{{{telefon}}}</span><br />

<span class="fa fa-phone">{{{telefon}}}</span>
<!-- span set to `display: block` with a `:before` pseudo element to contain the icon -->

<table>
    <thead>
        <tr>
            <th>Lab</th>
            <th>Contact</th>
            <th>Phone</th>
            <th>Website</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="name">ABC</td>
            <td class="contact">Johnny</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>

        <tr>
            <td class="name">DEF</td>
            <td class="contact">Billy</td>
            <td class="phone">555-1234</td>
            <td class="url">http://def.example.com/</td>
        </tr>

        <tr>
            <td class="name">GHI</td>
            <td class="contact">Dave</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>
    </tbody>
</table>

table, tbody, tr, td, th {
    display: block;
}

thead {
    display: none;
}

/* everything past here is optional */
tr + tr {
    margin-top: 1em;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.url {
    color: blue;
    text-decoration: underline;
}

Context

StackExchange Code Review Q#39425, answer score: 3

Revisions (0)

No revisions yet.