kinlane
7/17/2013 - 1:50 AM

This is the Javascript mustache listing for displaying the weekly top 25 API stack from a JSON file.

This is the Javascript mustache listing for displaying the weekly top 25 API stack from a JSON file.

    <!--- Begin Stack Listing Template --->
    {% raw  %}
    <script id="stackListingItemTemplate" type="text/template">   
        <tr>
            <td width="10" align="center" valign="top">
                <h2>{{stackcount}})</h2>
            </td>        
            <td width="150" align="center" valign="top">
                <a href="{{website}}" target="_blank"><img src="{{screenshot}}" width="150" /></a>
            </td>
            <td valign="top" align="left">
                
                <h3><a href="{{website}}" target="_blank">{{name}}</a></h3>
                {{summary}}
                <br />
                <p><em>{{tags}}</em></p>
                
            </td>
        </tr>
        <tr>
            <td align="center" colspan="3">
                <hr />
            </td>
        </tr>                                                                                                       
    </script>
    {% endraw %}

    <!--- Begin Stack Listing --->
    <table cellpadding="2" cellspacing="1" width="600" border="0" id="stacklisting">  </table>    
    <script type="text/javascript"> 
    
        // Requires Mustache - http://mustache.github.io/
    
        function showStack(datastore)
            {
            $.getJSON(datastore, function(data) {
        
                $.each(data['company'], function(key, val) {
                    var template = $('#stackListingItemTemplate').html();
                    var html = Mustache.to_html(template, val);
                    $('#stacklisting').append(html);                                                                
                  });           
                    
                });    
            }
    </script>
    
    <!-- Show the listing-->
    <script type="text/javascript">       
        showStack('data/company-stack-top-25.json');
    </script>    
    <!--- End Stack Listing --->