How to work with existing LMS or Studio pages

Table of Contents

Introduction

This page is a collection of things that you should know if you intend to modify existing LMS or Studio pages. The edX code base has been developed over a number of years, and hence it does not always follow a single way of doing things.

Note: if you plan on adding new pages you should follow the current best practices described here: How to add a pattern to the edX Pattern Library

RequireJS

Newer code uses RequireJS to manage the loading of JavaScript dependencies. You may see code like the following:

    require(['js/models/course'], function(Course) {
        ...
    });

This indicates that the code depends upon a class called Course which is defined in the file js/models/course.js. 

See RequireJS for more details.

Underscore Templates

One tip that is useful for our legacy code is knowing that Underscore templates are often rendered into the page with an element id ending with -tpl. For example, you might see the following line of JavaScript.

    ... = _.template($("#show-textbook-tpl").text(...));

The above code reads the text out of the element with the specified name. Via naming convention, it indicates that you will find the template in a file named show-textbook.underscore.

Newer code uses the RequireJS.text library to manage the JavaScript dependencies. You may see code like the following:

define([..., 'text!templates/components/card/card.underscore'],
    function (..., cardTemplate) {
        ...
        ... = _.template(cardTemplate)(...);
    });

This indicates that you'll find the Underscore file in templates/components/card/card.underscore.