Morfy json test
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
// http://codepen.io/FWeinb/pen/obAhf
function tmpl(t) {
var code = 'with(o){return \'' + t.replace(/{{\s*(.+?)\s*}}/g, '\'+($1)+\'') + '\';}';
return new Function('o', code);
}
// template
var template = [
'<div class="panel panel-default">',
' <div class="panel-heading">',
' {{title}} {{date}}',
' </div>',
' <div class="panel-body">',
' {{summary}}',
' <a class="btn btn-default" target="_blank" href="{{url}}">Go to {{title}}</a>',
' </div>',
'</div>'
].join('');
// base url
var url = 'http://monchovarela.es/webdemos/new_morfy/api?getjson=';
// on select
$('#select-choice').on('change', function() {
// value
var get = $(this).val() || 'index';
// show loading first
$('.page').html('Loading..');
// get info url
$('.info').html(url + get);
// get json
$.getJSON(url + get, function(data, status, xhr) {
// template
var data = {
title: data.title,
url: data.url,
date: data.date || '',
summary: data.summary || data.content,
content: data.content
}
// render remplate
var result = tmpl(template);
// show in frontend
$('.page').html(result(data));
});
});
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1>
Test Morfy Api Plugin
<small>With micro javascript templating</small>
</h1>
</div>
<form action="#" class="form">
<div>
<label for="select-choice">Select Page:</label>
<select name="select-choice" id="select-choice">
<option value=""> .... </option>
<option value="">Home</option>
<option value="contact">Contact</option>
<option value="blog/hello">Blog post hello</option>
</select> <code class="info"></code>
</div>
</form>
<!-- results -->
<br />
<div class="page"></div>
</div>
</div>
</div>