CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.js
Jesse Carter
Jesse Carter

Reputation: 21207

Web application using backbone, underscore, jquery, bootstrap etc

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

Upvotes: 2

Views: 1719

Answers (3)

okeen
okeen

Reputation: 3996

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!

Upvotes: 0

Fluidbyte
Fluidbyte

Reputation: 5210

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...

});

Upvotes: 3

jevakallio
jevakallio

Reputation: 35970

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.

Upvotes: 1

Related Questions