不同文件中的模型/视图答案

【问题标题】：Models/View in Different Files不同文件中的模型/视图
【发布时间】：2012-02-28 22:21:43
【问题描述】：

我只是尝试通过 todo 示例将主干.js 应用到我的项目中。在我的 app.js 文件中，我尝试实例化我的视图/模型/集合等，但我尝试收到错误消息：应用程序未在 TodoList 中定义。

HTML：

<head>

<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
<script type="text/javascript" src="js/backbone-localstorage.js"></script>

<script type="text/javascript" src="js/models/models.js"></script>
<script type="text/javascript" src="js/collections/collections.js"></script>
<script type="text/javascript" src="js/views/views.js"></script>
<script type="text/javascript" src="js/views/app.js"></script>

<script type="text/javascript" src="js/app.js"></script>

app.js（我的应用程序的根目录）：

    var app = {
    models:{},
    collections:{},
    views:{}
};

    jQuery(function($) {

        var Todos = new app.collections.TodoList;
        var test = new Todo;
        var test2 = new TodoView;
        var appView = new AppView({});

    });

collections.js：

app.collections.TodoList = Backbone.Collection.extend({

model: Todo,

localStorage: new Store("todos"),

done: function() {
    return this.filter(function(todo) {
        return todo.get('done');
    });
},

remaining: function() {
    return this.without.apply(this, this.done());
},
nextOrder: function() {
    if (!this.length) return 1;
    return this.last().get('order') + 1;
},

comparator: function(todo) {
    return todo.get('order');
}

});

【问题讨论】：

标签： backbone.js

【解决方案1】：

您正在尝试在名称空间准备好之前使用它。两种选择。首先，首先拥有“app.js”，但取出初始化代码并将其放入绝对最后加载的“bootstrap.js”中。第二个选项，也是我通常不喜欢的选项，定义你在文件中需要的命名空间，如果它们不存在的话。例如

var app = app || {};
app.collection = app.collection || {};

基本上，代码是一一加载的。当你说 namespace.subspace 时，代码期望命名空间已经被定义为某种东西——在我见过的大多数情况下，通常是一个对象。如果没有该基础部分，代码将只是扁平化 - 它会假设您正在尝试做相当于从屋顶开始建造城堡的工作。

【讨论】：