Uncaught ReferenceError: JST is not defined in Backbone using Jade templates

Question

I've just set up a skeleton Rails 4 app and have added the backbone-on-rails gem with some basic scaffolding.

In the process of trying to get everything set up, I keep running into the following error:

Uncaught ReferenceError: JST is not defined 
(anonymous function)

when trying to call the template index.jst.jade from the backbone view.

I've added one route with an alert just to make sure the scaffolding was wired together, but I can't get past this error to properly render views.

I have included the jade gem, made sure the template path is correct in the js view, and updated the manifest files accordingly.

Do I have to define JST somewhere? What am I doing wrong here?

Thanks

Gem Versions:

• jade (0.1.1)
• backbone-on-rails (1.1.1.0)
• underscore-rails (1.7.0)
• Rails 4.1.6 Ruby 2.1.0

Router:

Task.Routers.Tasks = Backbone.Router.extend({
  routes: {
    '': 'index',
  },

  index: function() {  
    alert('index router hit');
  },
});

View:

Task.Views.TasksIndex = Backbone.View.extend({
  template: JST['tasks/index'] 
});

Application.js:

//= require jquery
//= require lodash
//= require jquery_ujs  
//= require backbone
//= require jade/runtime

//= require task
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .

App structure tree:

|____javascripts
| |____application.js
| |____collections
| | |____tasks.js
| |____models
| | |____task.js
| |____routers
| | |____tasks_router.js
| |____task.js
| |____views
| | |____tasks
| | | |____tasks_index.js
|____templates
| |____tasks
| | |____index.jst.jade

Answer 1

Hmmm... have you required the runtime.js file before the templates? http://www.rubydoc.info/gems/jade/0.1.1/frames

This is meant to be a comment, but I don't have enough points to comment. haha.