Web application using backbone, underscore, jquery, bootstrap etc

Question

I'm working on my first javascript based web application and wanted to leverage a few different frameworks that I've been looking into but I'm having a lot of trouble getting all my different libraries loaded properly. I am trying to use Backbone and Underscore as well as the javascript included with Twitter Bootstrap (which I'm using for my CSS/HTML scaffolding). This is my butchered attempt at loading all of the scripts but I'm still getting firebug errors coming out of of require.js

As per the suggested answers I have edited my setup. In my index.html:

<script data-main="../scripts/main.js" src="../scripts/require.js"></script>

And in main.js:

require.config({ 
    // Require is defined in /scripts, so just the remaining path (and no ext needed)
    'paths': {
        "bootstrap": "scripts/bootstrap",
        "jquery": "scripts/jquery",
        "underscore": "scripts/underscore",
        "backbone": "scripts/backbone"
},
'shim': 
{
    backbone: {
        'deps': ['jquery', 'underscore'],
        'exports': 'Backbone'
    },
    underscore: {
        'exports': '_'
    }
}   
}); 

require([
    'jquery',
    'bootstrap',
    'underscore',
    'backbone'
], 
function(bootstrap, $, _, Backbone){

    Person = Backbone.Model.extend({
        initialize: function () {
            alert("Welcome to this world");
        }
    });

    var person = new Person;

});

But I am still getting script errors from require.js that points to this link http://requirejs.org/docs/errors.html#scripterror

Have you tried using `jQuery.noConflict()`? See the question/answer [here](http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) — PenguinCoder, Jan 16 '13 at 14:32
^ The downvote (though not mine) was probably because your question doesn't show much research. Anyway, see the answers and follow the links to get started. — jevakallio, Jan 16 '13 at 14:32

Fluidbyte · Accepted Answer · 2013-01-16T14:37:37.093

From a glance it looks like it's the setup of RequireJS, take a look at this: https://github.com/jcreamer898/RequireJS-Backbone-Starter

You don't need to define your scripts in the body, those should be loaded through Require, so something like:

Your main index.html:

<script src="path/to/require.js"  data-main="scripts/app">

Then the data-main reference would point to something like /scripts/app.js with the following:

require.config({ 
    // Require is defined in /scripts, so just the remaining path (and no ext needed)
    'paths': {
        "bootstrap": "libraries/bootstrap"
        "jquery": "libraries/jquery",
        "underscore": "libraries/underscore-min", 
        "backbone": "libraries/backbone-min"
    },
    'shim': 
    {
        backbone: {
            'deps': ['jquery', 'underscore'],
            'exports': 'Backbone'
        },
        underscore: {
            'exports': '_'
        }
    }   
    }); 

require([
    'bootstrap',
    'jquery',
    'underscore',
    'backbone'
], 
function(bootstrap, $, _, Backbone){

    // Start your application here...

});

I've tried what you suggested and am still getting the same errors. Posted my modified code in the original post. Do you have any thoughts? — Jesse Carter, Jan 16 '13 at 15:46
Check to make sure the pathing is correct in the 'paths' section. In your original post Backbone (for example) was in `/scripts/libraries/backbone.js`, so the path in Require would need to be `libraries/backbone`, you just don't need the `scripts` part since that's the starting dir for RequireJS — Fluidbyte, Jan 16 '13 at 17:06

score 1 · Answer 2 · answered Jan 16 '13 at 14:31

With RequireJS the only library you should include in the <script /> tags is require.js. In addition you need to specify a "main" javascript file, which should be loaded by RequireJS:

<script data-main="scripts/main.js" src="scripts/require.js"></script>

The main file should then load other libraries:

requirejs(['jquery','backbone'], function ($,Backbone) {
    //...
});

I suggest you read through the RequireJS API documentation and follow the examples.

score 0 · Answer 3 · answered Jan 16 '13 at 14:37

0

Nobody has made the point that maybe you are starting with so many components (each with its concepts to learn) to be your first time Javascript project. I would try to explore each of the libraries separately before in really simple projects, have some experience with them and when you have a clear picture of what they do (docs don't always give it) you can start combining them all.

Possibly not the answer you were looking for, but it's my experience who's talking here. Good luck!

answered Jan 16 '13 at 14:37

okeen

3,976
2
15
19

I have significant experience with many other languages and and frameworks including C#, C++ and ASP.NET MVC web development as well as experience with basic jQuery and javascript. I'm not worried at all about being able to learn the basics of a few javascript libraries as I go. It's just getting the thing set up thats a pain in my butt right now – Jesse Carter Jan 16 '13 at 14:42
And there really aren't that many components. Backbone and underscore is really the only thing thats new here. – Jesse Carter Jan 16 '13 at 14:43

Web application using backbone, underscore, jquery, bootstrap etc

3 Answers3