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

Underscore Templates

One tip that is useful for our legacy code is knowing that ``-tpl`` is often appended to the name of an Underscore.js template name inside the JavaScript code. For example, you might see the following line of JavaScript.

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

 The above code 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.