Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a script to display a list of common building blocks used by Backend as a Service (BaaS) providers, from a JSON file.
<style>
.buildingblocklistingcontainer{
padding-left: 10px;
padding-right: 10px;
width:550px;
}
.buildingblockcategorylistingul{
padding-left: 30px;
}
.buildingblockcategorylistingul li{
list-style: none;
padding: 10px 10px 20px 10px;
border: 0px solid #000;
font-size: 18px;
font-weight: bold;
}
.buildingblocklistingul{
padding-left: 30px;
}
.buildingblocklistingul li{
padding: 20px;
border: 0px solid #000;
font-size: 14px;
font-weight: normal;
}
</style>
<ul class="toolbar">
<li>{"<a href="https://raw.github.com/kinlane/backend-as-a-service/gh-pages/data/buildingblocks.json" title="JSON" target="_blank">JSON</a>"}</li>
<li>{"<a href="https://apievangelist.3scale.net/docs" title="API" target="_blank">API</a>"}</li>
<li>{"<a href="https://gist.github.com/kinlane/5992075" title="Script" target="_blank">SCRIPT</a>"}</li>
</ul>
<h1 class="title">Building Blocks</h1>
<!--BaaS Full Listing Template--->
{% raw %}
<script id="buildingblockcategoryTemplate" type="text/template">
<li><strong>{{category}}</strong><ul id="{{slug}}" class="buildingblocklistingul"></ul></li>
</script>
<script id="buildingblockTemplate" type="text/template">
<li><img src="{{image}}" width="50" align="left" style="padding: 15px;" /><strong>{{name}}</strong> - {{summary}}</li>
</script>
{% endraw %}
<!--BaaS Full Listing Container--->
<div class="buildingblocklistingcontainter">
<ul id="buildingblockListing" class="buildingblockcategorylistingul"></ul>
</div>
<!--BaaS Full Listing JavaScript--->
<script type="text/javascript">
// Requires Mustache - http://mustache.github.io/
function listbuidingblockcategories()
{
$.getJSON('data/buildingblockcategories.json', function(data) {
$.each(data['buildingblockcategories'], function(key, val) {
var template = $('#buildingblockcategoryTemplate').html();
var html = Mustache.to_html(template, val);
$('#buildingblockListing').append(html);
});
});
}
function listbuidingblocks()
{
$.getJSON('data/buildingblocks.json', function(data) {
$.each(data['buildingblocks'], function(key, val) {
categoryslug = val['categoryslug'];
var template = $('#buildingblockTemplate').html();
var html = Mustache.to_html(template, val);
$('#'+categoryslug).append(html);
});
});
}
</script>
<!--Trigger BaaS Full Listing JavaScript onLoad-->
<script type="text/javascript">
listbuidingblockcategories();
listbuidingblocks();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.