nakome
11/17/2015 - 6:44 PM

Morfy json test

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>&nbsp;<code class="info"></code>
								</div>
						</form>

						<!-- results -->
						<br />
						<div class="page"></div>
				</div>
		</div>
</div>

Morfy json test

test json

A Pen by Moncho Varela on CodePen.

License.