jpload

v1.6.4

Published

4 years ago

Small template engine to build reliable single page website applications.

0High
0Medium
0Low

robertobarron

template javascript browser library template manager

JPLoad is a small library that allows you to develop fast an reliable single page website applications.

Introduction

Currently there are many libraries/frameworks to help web developers to build single page applications. The majority of these frameworks required advanced knowledge of JavaScript and deep systems configurations. JPLoad has been created to help web developers to build single web application without having a deep understanding of Javascript.

Getting Started

To see how to use JPLoad to build a single web application, check out this example.

What's Included

JPLoad does not attempt to be a full, batteries-included framework. Instead, it tries to simplify the development by allowing the developer to use the library in the most appropiate way for their application.

Including the library into your main html file (Usually index.html)

<html>
<head></head>
<body>
 <div id="app"></div>
...
<script src="js/JPLoad.min.js"></script>
</body>
</html>

Declaring the hook

You need to declare a root element. The entire application will be created inside this element.

Javascript

var hook = document.getElementById('app');
...
if (response) {
	hook.innerHTML = response;
}

jQuery

var hook = $('#app');
...
if (response) {
	hook.html(response);
}

Requesting the template file

Template are html files that are injected into our application via Ajax.

JPLoad.getView('templates/init.html', function (response) {
	if (response) {}  //The template data resides in the response variable.
});

Injecting the template file

Template data can be injected into the element with the id 'div-id'

JPLoad.loadView(response, 'div-id');

Asynchronous request of templates

Templates will be loaded as their call finished.

JPLoad.getView('templates/second.html', function (response) {
	JPLoad.loadView(response, 'second-div');
});

JPLoad.getView('templates/first.html', function (response) {
	JPLoad.loadView(response, 'first-div');
});

Synchronous request of templates

Templates nested are loaded after the parent.

JPLoad.getView('templates/first.html', function (response) {
	JPLoad.loadView(response, 'first-div');

	JPLoad.getView('templates/second.html', function (response) {
		JPLoad.loadView(response, 'second-div');
	});
});

Injecting data into our template files

JPLoad has support to inject data into our templates before they are being loaded into our application.

####template.html ####

<html>
	<title><b>{{title}}</b></title>
	<body>
		<a href="#"><b>{{link-description}}</b></a>
	</body>
</html>

scripts.js

plain javascript

var data = {'title': 'Injecting Data', 'link-description': 'JPLoad Link'}
JPLoad.getView('templates/template.html', function (response) {
	JPLoad.loadView(response, 'id-div', data);
});

jQuery

var data = {'title': 'Injecting Data', 'link-description': 'JPLoad Link'}
JPLoad.getView('templates/template.html', function (response) {
	JPLoad.loadView(response, $('id-div'), data);
});

####HTML after injecting data ####

<html>
	<title><b>Injecting Data</b></title>
	<body>
		<a href="#"><b>JPLoad Link</b></a>
	</body>
</html>

License

MIT