CODEWITHSUNDEEP
javascriptjquerybackbone.jsrequirejs
user1031947
user1031947

Reputation: 6664

Trouble Setting up Multipage RequireJS

I am trying to use RequireJS in a multi-page project as per the instructions here: https://github.com/requirejs/example-multipage

I have a page main.html...

<html>
  <head>
    <script src="/components/require/require.js"></script>
    <script>
        require([ "/common.js" ], function ( common ) {
            require([ "/app/views/main.js" ]);
        });
    </script>
  </head>
  <body />
</html>

And I have a module main.js...

define(function( require ) {

    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );

    $(function() {
        var MainView = Backbone.View.extend({
            initialize: function() {
                alert( "hah!" );
            }
        });
        new MainView();
    });
});

This codes executes fine. So far so good. The trouble I am running into, is when I try to require another sub-view from within the main view.

So if I change main.js...

define(function( require ) {

    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );
    var SubView = require( "/app/views/subview" );

    $(function() {
        var MainView = Backbone.View.extend({
            initialize: function() {
                this.subView = new SubView();
            }
        });
        new MainView();
    });
});

And if I add a subview.js...

define(function( require ) {

    var $ = require( "jquery" );
    var _ = require( "underscore" );
    var Backbone = require( "backbone" );

    $(function() {
        var SubView = Backbone.View.extend({
            initialize: function() {
                alert( "SubView Hah!" );
            }
        });
        return SubView;
    });
});

Suddenly requirejs returns an error: "require.js:8 Error: Script error for: views/subview.js"

According to the Require JS documentation this error is typically triggered by syntax error / typo (http://requirejs.org/docs/errors.html#scripterror). However I do not think that is the problem in my case.

Does anyone have any idea what I am doing wrong?

Upvotes: 0

Views: 53

Answers (1)

Kyle Needham
Kyle Needham

Reputation: 3389

Currently in your main.js SubView is undefined, that is because your subview is not returning anything.

SubView

define(function(require)
{
    // These 2 require calls are not needed since they are not "required" for this module.
    //var $ = require( "jquery" );
    //var _ = require( "underscore" );
    var Backbone = require("backbone");

    return Backbone.View.extend({
        initialize: function()
        {
            alert( "SubView Hah!" );
        }
    });
});

Upvotes: 0

Related Questions