salcosta/index.html

## index.html
<!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>
	<!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>