Backbone.js：将视图，集合，模型分离到不同的js文件，它们无法识别对方

我使用Backbone.js创建一个Web应用程序，将所有视图，集合和模型写入一个js文件，它成功了！

现在我想将它们分成不同的js文件，就像：

并在jquery load中加载模型代码：

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

萤火虫告诉我bug：

 manageModel is not defined [Break On This Error] model: manageModel 

在集合文件中

为什么如果将它们分成不同的文件，它们无法识别对方？我怎样才能解决这个问题？或者什么是正确的加载顺序？谢谢

Answer 1

添加函数包装器后：

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

您已经引入了新的作用域，并且在这些函数中声明的所有var仅在这些函数中可见。 你可以通过使它们全局（即window属性）来解决这个问题：

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

或者更好，引入应用程序命名空间：

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

然后通过app.manageModel app引用事物：

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

Answer 2

您还可以使用Require.js查看使用js文件模块化。 工作得非常好，只会在需要时加载视图，模型和集合。 如果您的应用程序非常大，建议使用此方法。 它将阻止您在页面加载时加载所有脚本。 一个快速的backbone.js实现如下：

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

以上是收集模块。 你可以看到’models / post’指向另一个模块的位置。 jquery，下划线和主干在我的配置中定义，所以我只需要传入它们而不是指向它们的实际位置。 这是一个快速介绍，但是如果你想分开你的js文件， 那就是Require.js 。