JPLoad is a small library that allows you to develop fast an reliable single page website applications.
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.
To see how to use JPLoad to build a single web application, check out this example.
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.
<html>
<head></head>
<body>
<div id="app"></div>
...
<script src="js/JPLoad.min.js"></script>
</body>
</html>
You need to declare a root element. The entire application will be created inside this element.
var hook = document.getElementById('app');
...
if (response) {
hook.innerHTML = response;
}var hook = $('#app');
...
if (response) {
hook.html(response);
}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.
});Template data can be injected into the element with the id 'div-id'
JPLoad.loadView(response, 'div-id');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');
});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');
});
});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);
});script.js (jQuery)
var data = {'title': 'Injecting data', 'link-description': 'JPLoad Link'};
var $id = $('id-div');
JPLoad.getView('templates/template.html', function (response) {
JPLoad.loadView(response, $id, data);
});HTML DATA
<html>
<title><b>Injecting Data</b></title>
<body>
<a href="#"><b>JPLoad Link</b></a>
</body>
</html>
MIT