模型/查看不同的文件

Gam*_*mbo 3 backbone.js

我只是尝试使用todo示例将backbone.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>
Run Code Online (Sandbox Code Playgroud)

app.js(我的应用程序的root):

    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({});

    });
Run Code Online (Sandbox Code Playgroud)

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');
}
Run Code Online (Sandbox Code Playgroud)

});

Ste*_*hen 5

您正准备在命名空间准备好之前使用它.两种选择.首先,首先使用'app.js'但是取出初始化代码并将其放入最后加载的'bootstrap.js'中.第二个选项,以及我通常会使用的选项,如果它们尚未存在,则在文件中定义您需要的命名空间.例如

var app = app || {};
app.collection = app.collection || {};
Run Code Online (Sandbox Code Playgroud)

基本上,代码是逐个加载的.当你说namespace.subspace时,代码期望命名空间已被定义为某种东西 - 通常是我见过的大多数情况下的对象.如果没有那个基础,代码就会变得平坦 - 它会假设你正在尝试从屋顶开始构建城堡.