Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
This is a Mustache + JSON listing that displays a full listing of Backend as a Service (BaaS) providers.
padding-left: 10px;
padding-right: 10px;
padding-left: 30px;
.baaslisting li{
list-style: none;
padding: 30px;
border: 0px solid #000;
<!--Data, API and Script Toolbar--->
<ul class="toolbar">
<li>{"<a href="" title="JSON" target="_blank">JSON</a>"}</li>
<li>{"<a href="" title="API" target="_blank">API</a>"}</li>
<li>{"<a href="" title="Script" target="_blank">SCRIPT</a>"}</li>
<h1>BaaS Providers</h1>
<!--BaaS Full Listing Template--->
{% raw %}
<script id="companyListingTemplate" type="text/template">
<a href="companies-detail.html?id={{id}}"><img src="{{logo}}" width="200" align="left" style="padding: 15px;" /></a>
<a href="companies-detail.html?id={{id}}" style="color: #000;"><strong>{{name}}</strong></a> - {{summary}}... <a href="companies-detail.html?id={{id}}">details</a>.
{% endraw %}
<!--BaaS Full Listing Container--->
<div class="baaslistingcontainter">
<ul id="companyListing" class="baaslisting"></ul>
<!--BaaS Full Listing JavaScript--->
<script type="text/javascript">
// Requires Mustache -
function listCompanies()
$.getJSON('data/companies.json', function(data) {
toggle = 0;
$.each(data['company'], function(key, val) {
var template = $('#companyListingTemplate').html();
var html = Mustache.to_html(template, val);
<!--Trigger BaaS Full Listing JavaScript onLoad-->
<script type="text/javascript">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment