Skip to content

Instantly share code, notes, and snippets.

@salcosta salcosta/index.html
Created Mar 6, 2018

Embed
What would you like to do?
Single Page App Example using jQuery
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" />
<style>
main{
margin-top:60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" template="home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" template="settings">Settings</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/template" template-id="home">
<div class="container-fluid">
<h1>Here is my main content</h1>
</div>
</script>
<script type="text/template" template-id="settings">
<div class="container-fluid">
<h1>Here are my settings</h1>
<span scope="frob"></span>
<input class="form-control" type="text" scope="foo" />
<button class="btn btn-primary save-form">Save</button>
</div>
</script>
<script>
var simpleApp = {
defaultView : 'home',
scope : {
foo: "Bar",
frob: "Nozzle"
},
init: function() {
$('.nav-link').click(function() {
var templateId = $(this).attr('template');
simpleApp.loadTemplate(templateId);
});
$('body').on('click', '.save-form', function() {
simpleApp.saveVariables();
});
simpleApp.loadTemplate(simpleApp.defaultView);
},
loadTemplate: function(templateId) {
var template = $('[template-id="' + templateId + '"]').html();
$('[role="main"]').html(template);
simpleApp.bindVariables();
},
bindVariables: function() {
$('main [scope]').each(function() {
var scopeVariable = $(this).attr('scope');
if (typeof simpleApp.scope[scopeVariable] !== 'undefined') {
if ($(this).is(':input')) {
$(this).val(simpleApp.scope[scopeVariable]);
} else {
$(this).text(simpleApp.scope[scopeVariable]);
}
}
});
},
saveVariables: function() {
$('main [scope]:input').each(function() {
var scopeVariable = $(this).attr('scope');
if (typeof simpleApp.scope[scopeVariable] !== 'undefined') {
simpleApp.scope[scopeVariable] = $(this).val();
}
});
}
};
simpleApp.init();
</script>
</body>
</html>
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.