Backbone.js:separate the view ,collection,model to different js file,they could't recognize each other

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: ``` ``` 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

Accepted Answer

Once you add the function wrappers:

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

You've introduced new scopes and all the `var`s 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,
        //...
    });
});
```

Backbone.js:separate the view ,collection,model to different js file,they could't recognize each other

Solution

Problem