Can't get Backbone-relational to work with AMD (RequireJS)

Question

I have the following Backbone router definition in CoffeeScript:

// appointments_router.js.coffee
define ["app", "appointment"], (App) ->
  class Snip.Routers.AppointmentsRouter extends Backbone.Router
    initialize: (options) ->
      @appointments = new Snip.Collections.AppointmentsCollection()
      @appointments.reset options.appointments

Here is the "appointment" module on which it depends:

// appointment.js.coffee
define ["app", "relational"], (App) ->
  class Snip.Models.Appointment extends Backbone.RelationalModel
    paramRoot: "appointment"

    defaults:
      time_block_type_code: "APPOINTMENT"
      start_time: null
      start_time_time: null
      start_time_ymd: null
      stylist: {}
      client: {}
      notes: ''

And finally, here is my application.js.coffee:

require
  paths:
    underscore: "lodash.min"
    appointment: "backbone/models/appointment"
    appointmentsRouter: "backbone/routers/appointments_router"
    relational: "backbone-relational"
  shim:
    "underscore":
      exports: "_"
    "backbone":
      deps: ["underscore"]
      exports: "Backbone"
    "relational":
      deps: ["backbone"]

requirejs ["appointmentsRouter"], (AppointmentsRouter) ->
  window.router = new Snip.Routers.AppointmentsRouter({appointments: []})
  Backbone.history.start()

When I load the page, I get Uncaught TypeError: undefined is not a function on backbone.js, line 1019.

If I omit the "relational" shim, I instead get Uncaught TypeError: Cannot set property 'Relational' of undefined in backbone-relational.js. The "undefined" it's talking about is Backbone. So if I omit the "relational" shim, backbone-relational.js still gets loaded, but it doesn't know about Backbone.

How do I fix this?

Answer 1

You can use a shim configuration with Require.. drop amd, backbone did..

take a look at https://github.com/DarrenHurst/BroadStreet

for how to configure shim.

Answer 2

Turns out I need to require jQuery.

  shim:
    "underscore":
      exports: "_"
    "backbone":
      deps: ["underscore", "jquery"]
      exports: "Backbone"
    "relational":
      deps: ["backbone"]