Backbone.js:separate the view ,collection,model to

Question

I use Backbone.js to create a web app,all the view,collection and model write into one js file,it success!

now I want separate them to different js files,just like:

<script type="text/javascript" src="js/layermanagemodel.js"></script>       
<script type="text/javascript" src="js/layermanagecollection.js"></script>  
<script type="text/javascript" src="js/layermanageview.js"></script>    
<script type="text/javascript" src="js/boot.js"></script>

and load model code in jquery load:

$(function(){
    //Model
        var manageModel = Backbone.Model.extend({
                default:{
                    'selectedId':'unknow'
                },
                selectLayer:function(uuid){
                     this.set({"selectedId": uuid});
                },
                delLayer:function(){

                }
        }); 
})

but the firebug tell me bug:

manageModel is not defined
[Break On This Error]   

model: manageModel

in collection file

why if separate them to different file ,they could not recognize each other?how can I solve this problem?Or what is right load order?thank you

Answer 1

You could also look at making you js files modular using Require.js. Works extremely well and will only load the views, models, and collections when they are needed. This is recommended if your application is quite large. It will prevent you from having to load all your scripts on page load. A quick backbone.js implementation would be as follows:

define([
    'jquery',
    'underscore',
    'backbone',
    'models/post'
], function ($, _, Backbone, Post) {
    "use strict";
    var PostsCollection = Backbone.Collection.extend({
        model: Post,
        url: CONFIG.apiUrl + 'posts'
    });
    return PostsCollection;
});

The above is a collection module. You can see 'models/post' is pointing to the location of another module. jquery, underscore, and backbone were defined in my config so I just have to pass them in as opposed to pointing to their actual location. This is a quick intro, but if you are looking to separate your js files, Require.js is the way.

Answer 2

Once you add the function wrappers:

$(function() {
    // ...
})

You've introduced new scopes and all the vars declared inside those functions are only visible within those functions. You can get around this by making them global (i.e. properties of window):

$(function(){
    window.manageModel = Backbone.Model.extend({
        //...
    });
});

or better, introduce an application namespace:

$(function(){
    window.app = window.app || { };
    window.app.manageModel = Backbone.Model.extend({
        //...
    });
});

and then refer to things through app like app.manageModel:

$(function(){
    window.app = window.app || { };
    window.app.someCollection = Backbone.Collection.extend({
        model: app.manageModel,
        //...
    });
});