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:

Answer 1

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,
        //...
    });
});

Answer 2

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.