Uncaught ReferenceError: Backbone is not defined

Question

I am building a website with the use of phonegap. I ve noticed that bakcbone and jquery -jqm, don't work in the compiled application. Actually, I am receiving in eclipse the following error:

Uncaught ReferenceError: Backbone is not defined at file:///android_asset/www/scripts/JSscript.js:7

Also I am receiving the error:

Uncaught ReferenceError: requestAnimationFrame is not defined at file:///android_asset/www/scripts/JSscript.js:4484

And my touch and click event doesn't function in the extraxted app. Any idea how can I fix this??

JS order:

<script type="text/javascript" src="./scripts/jquery.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src='./scripts/JSscript.js'></script>

And JSscript:

var obj;
var profile;    

$(function() {

    // Backbone model Creation
    var ProfileModel = Backbone.Model.extend({

        defaults: {
                tstamp: 'adffdsa',
                map:"",
                tagsCloud:"",
                sentiment: "",
                usersCloud: "",
                timeline: "",
                highlights: "",
                signals: ""
        },

        initialize: function() {

        }

    });

    //Backbone model initialization
    profile = new ProfileModel({
                tstamp: 'adffdsa',
                map:"",
                tagsCloud:"",
                sentiment: "",
                usersCloud: "",
                timeline: "",
                highlights: "",
                signals: ""
    });

    var ProfileList = Backbone.Collection.extend({

                    model: ProfileModel,
                    url: 'data.php'
    });   

    var ProfileView = Backbone.View.extend({

        el: "#profiles",
        template: _.template($('#profileTemplate').html()),
        render: function(eventName) {

        _.each(this.model.models, function(profile){
        var profileTemplate = this.template(profile.toJSON());
        //push data to obj for map script
        obj = profile.toJSON();
        // Add data to DOM element
        $(this.el).html(profileTemplate);
        }, this);

            return this;

        }


    });

        var profiles = new ProfileList([profile]);    
        var profilesView = new ProfileView({model: profiles});

        // Fetching data from server every n seconds
        setInterval(function() {

                profiles.fetch({reset: true});

        }, 4000); // Time in milliseconds

         profiles.bind('reset', function () {

                profilesView.render();

        });

});

Are you sure your Backbone file is higher in the DOM than JSscript.js? — Adam Botley
Yes, I tried to add cordoca.js and phonegap.js but nothing changed. — Jose Ramon
Inside .js file i try to connect with a server. Is there a chance that a call to a php file may cause those problems?? Furthermore I ve got another .js file which contains jquery and jqm script for animate DOM elements. It doesn't work either. — Jose Ramon
I define backbone and underscore.js locally but nothing change. I ve got the same errors. — Jose Ramon

Jose Ramon Jose Ramon · Accepted Answer · 2013-11-12T09:30:37

EDIT: I found out that external url have to be defined in config.xml with . Thus, animation.js works like a charm. However, I cant find why backbone.je doesnt work. It seems that data.php is causing problems.

 var ProfileList = Backbone.Collection.extend({

                    model: ProfileModel,
                    url: 'data.php'
    });

I am receiving Unknown chromium error: 0. File data.php location is on localhost, so I add in config.xml ip adress. However I am still receiving chromuim error. Any idea?

Uncaught ReferenceError: Backbone is not defined

1 Answers