Skip to content

Instantly share code, notes, and snippets.

@cpjobling

cpjobling/index.html

Last active December 16, 2015 07:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cpjobling/5399905 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cpjobling/5399905 to your computer and use it in GitHub Desktop.
Download ZIP
Step 1: Move HTML for App-Data into home template, define home view to render the template, define home route to render home view and start URL history tracking.
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<body>
:
<!-- Note "Hero Unit" has been deleted -->
<div class="container">
<div id="app">
<!-- content of item-home template was here -->
</div>
</div> <!-- /container -->
<script id="item-home" type="text/template">
<!-- this moved from div.container -->
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4">
<form id="selection" action="" method="post">
<h2>List of Projects</h2>
<ul id="p-list">
<li class="selected"><input type="checkbox" name="selected_projects" value="1" checked> <a class="project btn btn-success" href="/projects/1">Project 1</a></li>
<li><input type="checkbox" name="selected_projects" value="2" > <a class="project btn" href="/projects/2">Project 2</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="3" checked><a class="project btn btn-success" href="/projects/3">Project 3</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="4" checked><a class="project btn btn-success" href="/projects/4">Project 4</a></li>
<li><input type="checkbox" name="selected_projects" value="5" ><a class="project btn" href="/projects/5.html">Project 5</a></li>
<li><input type="checkbox" name="selected_projects" value="6" > <a class="project btn" href="/projects/6">Project 6</a></li>
<li><input type="checkbox" name="selected_projects" value="7" > <a class="project btn" href="/projects/7">Project 7</a></li>
<li><input type="checkbox" name="selected_projects" value="8" > <a class="project btn" href="/projects/8">Project 8</a></li>
<li><input type="checkbox" name="selected_projects" value="9" > <a class="project btn" href="/projects/9">Project 9</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="10" checked> <a class="project btn btn-success" href="/projects/10">Project 10</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="11" checked> <a class="project btn btn-success" href="/projects/11">Project 11</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="12" checked> <a class="project btn btn-success" href="/projects/12">Project 12</a></li>
<li class="selected"><input type="checkbox" name="selected_projects" value="13" checked> <a class="project btn btn-success" href="/projects/13">Project 13</a></li>
</ul>
<p><a class="btn btn-primary" href="order.html">Order selected projects &raquo;</a></p>
</form>
</div>
<div class="span8">
<h2>Project Details</h2>
<p>
Click on a project title at left to see details.
</p>
</div>
</div>
<hr>
<footer>
<p>&copy; Your Name (your student number) 2013</p>
</footer>
</script>
:
</body>
</html>
Raw
step1-main.js
var HomeView = Backbone.View.extend({
el: '#app',
initialize: function () {
this.template =_.template($('#item-home').html());
this.render();
},
render: function() {
var el = this.$el
el.empty();
el.append(this.template());
return this;
}
});
// ...
AppRouter = Backbone.Router.extend({
routes: {
"": "home"
},
home: function () {
console.log('home');
new HomeView();
}
});
// ...
$(document).ready(function () {
projectApp = new AppRouter();
Backbone.history.start();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment