All posts tagged templating

  • Row (Zebra) Striping With Mustache.js Using Counters

    When I started working with Mustache templates, one of the features I felt was lacking was the ability to track what item was currently being processed by the template. Sure, you can always reference the current item via {{.}} but there’s no way to see how many items have been processed; there’s no counter. This makes it difficult to do things like alternate row colors on a table (a.k.a row or “zebra” striping).

    Well, I set about figuring out a way to get around this limitation and here’s what I came up with. Basically, we’re setting up a function called getClass and storing it as a property of the JSON data we’re getting back from the server. Each time the function gets called we check the value of callCounter which is a property of the getClass function (remember, functions are object and can therefore have properties). Each time the function is called, we increment the value of callCounter. If the value is odd we return the string ‘odd’; if it is even we return the string ‘even’.

    $(document).on('ready', function() {
        $.getJSON('assets/data/channels.json', {}, function(channelData, textStatus, jqXHr) {
            channelData.getClass = function() {
                channelData.getClass.callCounter = channelData.getClass.callCounter || 0;
                channelData.getClass.callCounter++;
                return channelData.getClass.callCounter % 2 == 0 ? 'even' : 'odd';
    
            }
            $.get('assets/templates/channelList.mustache.html', function(template, textStatus, jqXhr) {
                var channelList = $('#channels tbody');
    
                channelList.append(Mustache.render($(template).filter('#channelTpl').html(), channelData))
            });
        });
    });
    
    

    Your template might end up looking something like this:

    <script id="channelTpl" type="text/html">
    {{#channels}}
    <tr class ="{{getClass}}">
        <td>{{Name}}</td>
        <td><a href ="{{playlist}}">{{playlist}}</a></td>
    </tr>
    {{/channels}}
    </script>
    

    Hopefully this helps someone out. If you know of a better way to accomplish this, please let me know in the comments below.

  • Mustache.js Render is Not Defined

    I ran into the above-mentioned error while trying to learn about lambdas in Mustache. According to the documentation, if your data looks like this:

    {
      "name": "Willy",
      "wrapped": function() {
        return function(text) {
          return "<b>" + render(text) + "</b>"
        }
      }
    }
    

    Read more

  • If-Else Logic in Mustache.js (Sort Of)

    For those of you who may not be familiar with it, Mustache.js is a logic-less templating engine for JavaScript. What do I mean by “logic-less”. Well, simply put, it means that Mustache.js lacks structures common to many programming languages; there’s no way to do things like for-loops or function calls (as we may be familiar with them) from within a template. The goal behind this lack of structure is to force you to keep your display logic and your view (templates) completely separate.

    Read more