Making Backbone.js modular with Require.js

Question

I am attempting to make my Backbone.js components, models and views modular through Backbone.js. However whenever I attempt to require() one it returns:

function (){return i.apply(this,arguments)}

instead of the Backbone wizardry I require.

I have set up my Require.js like so:

// Configure require.js
require.config(
    {
        paths: {
            "data": "config"
        ,   "jquery": "libs/jquery.min"
        ,   "underscore": "libs/underscore-min"
        ,   "backbone": "libs/backbone-min"
        ,   "events": "collections/events"
        ,   "eventModel": "models/eventModel"
        ,   "eventView": "views/eventView"
        }
    ,   shim: {
            underscore: {
                exports: '_'
            }
        ,   jquery: {
                exports: '$'
            }
        ,   backbone: {
                deps: ["underscore"]
            ,   exports: "Backbone"
            }
        }
    }
);

// Initiate app
require(
    [
        "data"
    ,   "jquery"
    ,   "underscore"
    ,   "backbone"
    ,   "events"
    ,   "eventModel"
    ,   "eventView"
    ], function(data, $, _, Backbone, Events, EventModel, EventView) {
        console.log(Events);
        _.each(["data/general.xml"], function(URI) {
            var general = new Events({url: URI});
        });
    }
);

And here is my collections/events.js:

define(
    [
        "backbone"
    ,   "eventModel"
    ]
,   function(Backbone, EventModel) {
        "use strict";
        var Events = Backbone.Collection.extend({
            model: EventModel

        ,   parse: function(data) {
                var parsed = [];
                $(data).find('Event').each(function(index) {
                    parsed.push({
                        title: $(this).find('title').text(),
                        date: $(this).find('date').text(),
                        content: $(this).find('content').text()
                    });
                });
                return parsed;
            }

        ,   fetch: function(options) {
                options = options || {};
                options.dataType = "xml";
                Backbone.Collection.prototype.fetch.call(this, options);
            }
        });

        return Events;
    }
);

I would expect that to return the Events collection, however it clearly isn't. Can anyone see what I am doing wrong?

Loamhoof · Accepted Answer · 2013-04-12 13:12:26Z

1

Everything seems fine. What you see:

function (){return i.apply(this,arguments)}

is the constructor of your class. Pay no attention to it. Instead, try to log new myClass.

Edit:
You don't see any of the methods because they're stored in the prototype of your class. The i function that is called is the "real" constructor (named i because it's been minified).

answered Apr 12, 2013 at 13:12

Loamhoof

8,29329 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Reith Over a year ago

You are right, I was attempting to use it incorrectly further down the line and assumed that was the problem. Just noticed my mistake. Silly me.

Collectives™ on Stack Overflow

Making Backbone.js modular with Require.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related