Download KA Lite Documentation

CHAPTER 6
Developer Docs
Useful stuff our devs think that the rest of our devs ought to know about.
6.1 Front End Code
All of our front end code is written in Javascript, with much of it using Backbone.js (and its dependencies jQuery and
Underscore.js).
All new code, where possible, should be written using Backbone.js to modularize functionality, and allow code to be
reused across the site.
Inline Javascript (i.e. Javascript directly in the Django templates inside <script> tags) should be avoided except where
absolutely necessary (such as to initialize some master object on a page).
For templating on the front end, we use Handlebars.js to render templates with a restricted set of statements and access
to all variables passed into the template context.
6.2 Implementing with Backbone
Most of our front end code uses only three kinds of objects, Backbone Models, Collections, and Views.
Backbone Models contain data that we use to render the page - in the case of a coach report, for example, this might
be data about each student.
Backbone Collections are groups of Models - so you might have a Collection where each model represents the progress
data for an individual student.
The Views define how this data is displayed in the browser, and also defines responses to user interaction to the current
display.
Most Views also have an associated Handlebars template, which defines the HTML and how the data passed into the
template is displayed in the rendered View.
Often the data contained in a Backbone Model can change while the user is still on the same page (for example, a
student’s total points can change while they are interacting with an exercise, so we want their displayed points to
update whenever the ‘points’ attribute of the model updates too).
Here is an example of a Backbone View in KA Lite that does just that:
var TotalPointView = Backbone.View.extend({
initialize: function() {
65