Our master page contains the following sections. In order to facilitate a client-side templating model using backbone.js, we will split up our master page into templates.
Let's create a new folder called ./templates and add the following files:
./templates projects.hbs project-form.hbs repositories.hbs commits.hbs issues.hbs
In order to avoid compiling the templates on demand, let's install the grunt task grunt-contrib-handlebars, which will precompile our handlebar templates:
npm install grunt-contrib-handlebars --save-dev
We outline the grunt configuration for our handlebars compilation in the following code; it simply takes as input a template location templates/*.hbs and compiles these templates into a single JavaScript file and stores it at public/components/vision/templates.js.
grunt.loadNpmTasks('grunt-contrib-handlebars'),
handlebars: {
compile: {
options: {
namespace: "visiontemplates"
},
files: {
"public/components/vision/templates.js": ["templates/*.hbs"]
}
}
},We complete this section by taking a look at the master page template ./views/index.html. The body contains the following areas: a header, which includes either a login button or a logout button with a welcome message, a project-list form, repository-list, commit-list, and issue-list.
{{#if user}}
<p class="navbar-text">welcome {{user}},
<a href="/logout" class="navbar-link">
click here to sign out</a>
</p>
{{else}}
<a href="/auth/github">
<img src="/vision/github.png" id='login'>
</a>
{{/if}}
{{#if user}}
<div class="span3">
<h2>Projects</h2>
<ul id="projects-list" class="nav nav-list"></ul>
<br/><a id="showForm" class="btn btn-large btn-block btn-primary" href="#add">Add project</a>
</div>
<div class="span3">
<h2>Repositories</h2>
<ul id="repository-list" class="nav inline nav-list"></ul>
</div>
<div class="span3">
<h2>Commits</h2>
<ul id="commits-list" class="media-list"></ul>
</div>
<div class="span3">
<h2>Issues</h2>
<ul id="issues-list" class="media-list"></ul>
</div>
{{else}}
<div class="span12">
<div class="hero-unit">
<h1>vision</h1>
<lead>a real-time multiple repository dashboard for GitHub issues and commits</lead>
<p><small>In order to use vision; please login to a valid GitHub Account</small></p>
</div>
</div>
{{/if}}