Question

For a web-app I’m building, I’m really interested in recursing through an object tree and modifying nodes on the fly. There’s an underscore mixin that promises that, underscore.loop, but I can’t seem to pull it into my page. I get a script error:

Uncaught TypeError: Cannot call method ‘mixin’ of undefined

which is on line 33 of the tool.

Now, underscore.loop.js is pulled in after backbone.js and underscore-data.js.

1. Both of these tools use Underscore, and

2. Underscore is definitely available after trying underscore.loop.

So why can’t underscore.loop.js see Underscore. It uses pretty much the same scoping and initialization semantics as underscore-data.js. Can anyone shed any light on this?

Answer 1

Look a little higher in the source for underscore.loop and you’ll see this:

var RecursiveCall, flatStackLoop, _;
var __slice = Array.prototype.slice;
try {
  _ = require('underscore');
} catch (_e) {}

Note the var ... _; and how _ is initialized. So underscore.loop.js is trying to make sure that underscore.js is loaded and that it has a local version of _ to use. require is a node.js-ism so you don’t have it in your client-side world and that leaves you with an undefined value in _. You can either grab a client-side library that supplies a node.js compatible require:

• require.js
• head.js
• Lab.js
• …

or edit your copy of underscore.loop.js to not include the var _; declaration or the try block. Alternatively, you could hack up a little require implementation of your own that just does this:

function require(what) {
    return what == 'underscore' ? window._ : null;
}

or even:

function require(ignored) { return window._ }

and load your require hack between underscore.js and underscore.loop.js.