Having trouble integrating Backbone-relational with AMD (RequireJS)?

I'm struggling with my Backbone router and module definitions in CoffeeScript. Can someone help me troubleshoot?

// 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 code:

// 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: ''

Lastly, check out 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()

Encountering errors on page load such as

Uncaught TypeError: undefined is not a function
or
Uncaught TypeError: Cannot set property 'Relational' of undefined
? Let's figure out how to resolve these issues.

Answer №1

To enhance compatibility, consider implementing a shim configuration along with Require.js instead of relying on AMD like Backbone does.

Visit https://github.com/DarrenHurst/BroadStreet

to see an example of how to set up a shim configuration.

Answer №2

It appears that jQuery is a necessary requirement.

  configuration:
    "lodash":
      exports: "_"
    "backbone":
      dependencies: ["lodash", "jquery"]
      exports: "Backbone"
    "relational":
      dependencies: ["backbone"]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the input remains below ten

My goal here is to ensure that the value in an input element is a non-zero digit (0<x<=9). Here's the HTML tag I'm using: <input type="number" class="cell"> I've experimented with various JavaScript solutions, but so far none h ...

Here is a way to return a 400 response in `express.js` when the JSON request body is invalid

How can I make my application send a response with status code 400 instead of throwing an error if the request body contains invalid JSON? import express from 'express' app.use(express.urlencoded({ extended: false })) app.use(express.json()) ...

Tips for customizing fonts in react-pdf

I am having difficulty in changing fonts within react-pdf. // Register Font Font.register({ family: "Roboto", src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf" }); The default f ...

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

Attempting to generate a nested array structure in order to produce a JSON object for output

I am currently working on a JavaScript script that interacts with the Netsuite ERP platform to retrieve data. Currently, the script is returning data in an array format, specifically product information. While this is functional, I would prefer it to retu ...

Creating a background with image overlays in React: A step-by-step guide

My challenge is to have an image that covers the entire background but it seems to stop abruptly where another object is placed, unable to extend further. I am utilizing Material UI and here is a snippet of my code: import { Image } from "../images&q ...

The step-by-step guide on displaying API choices in an Autocomplete feature and keeping them up

Having trouble with updating autocomplete options. An error message pops up in the console log when I try to deselect a tag or select a new one: MUI: The value provided to Autocomplete is invalid. None of the options match with [{"catName":{&qu ...

How can I securely save a user's login information using ExtJS without saving it multiple times?

Currently, I am utilizing Ext.Ajax.request() to access a PHP page that provides user-specific information during the login process. In order to store variables such as cookies and session information in ExtJS, I have created a model with necessary fields a ...

Guide on using react-highlight-words to emphasize various keywords using different color schemes

I am currently working on implementing a search feature for my React project. At the moment, I am only required to enter a single keyword and search for it within the text. Once found, I need to extract and display the sentences containing this keyword sep ...

Ending the Firefox browser using JavaScript

I have been trying to use the basic window close javascript command window.close(); but it seems to only work in IE and not in any other browser. Can anyone provide assistance on how to successfully close a browser tab in Firefox, Opera, or Chrome? Thanks ...

Having trouble with jQuery.validate.js while using type="button" for AJAX calls in an MVC application

I have come across several questions similar to mine, but I haven't found a solution that fits my situation in MVC, so I am reaching out for help. I am a beginner with MVC and I am utilizing jQuery AJAX to invoke a controller method for data insertio ...

Trouble with integrating HTML5 canvas from an external JavaScript file

Having trouble with storing canvas js in an external file. If the javascript responsible for drawing on the canvas is included in the html header, then the rectangle is displayed correctly. Here is the working html (javascript in html header): <!DOCT ...

Is it possible to convert a blob to an image file using the FileReader in HTML

client side code <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; fun ...

Should I serialize a 2D array in JSON format and send it as two separate arrays, or is

When it comes to sending a 2-dimensional array (along with several other variables) to PHP using jQuery.ajax(), I have a couple of options in mind: One option is to serialize to json using JSON-js Another option would be to send both arrays as csv string ...

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

Error message: After using gulp-npm-dist to copy only the dependency modules, the node module was not

I'm currently exploring different methods to package only the necessary node_modules dependencies for my project. After some research, I came across gulp-npm-dist and created a gulpfile.js. var gulp = require('gulp'); var npmDist = requir ...

Tips for maintaining wallet connectivity through page refresh with UseEffect

I am working on a function that utilizes the UseEffect to maintain wallet connectivity even when the page is refreshed. Here is the code snippet for my NavBar component: const NavBar = ({ accounts, setAccounts }) => { const isConnected = Boolean(acc ...

Combining multiple directories into a single output using the rollup command

Alright, let's talk about my directory setup: mods/ -core/ --index.js --scripts/ ---lots of stuff imported by core/index Currently, the typical rollup process works smoothly if you want to create something like mods/core/index.min.js. However, I ha ...

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

I am currently working on a project that involves laying out multiple Kendo windows in rows. Specifically, I need to display 4 windows in each row and have them shift left when closed. My framework of choice is Bootstrap 3. Everything works as expected w ...

Redis appears to be missing the expected results

After following an express demo which involved storing and retrieving values with Redis, I attempted to implement the code in my own Express app. However, I encountered issues as the req.online variable was returning null when I tried to retrieve its lengt ...