如何在backbone.js中通过全局变量创建集合？

Question

我在Whosebug中得到了很多顾问的帮助，我的部分问题得到了解决，但仍有一些问题存在。

我查阅了答案并尝试解决问题，因此我理解了 javascript 命名空间模式。

How do I declare a namespace in JavaScript?

我遇到了全局变量创建成功的问题，但是我不处理生成的变量。

collecton.js

    var app = app || {};
(function () {
    'use strict';
    var collections = app.Collection = app.Collection || {};

    collections.VideoLists =  Backbone.Collection.extend({
        model: app.Model,
        initialize: function(){
            console.log('load Collection');
        }
    });

    app.Collection = collections.VideoLists;
})();

model.js

var app = app || {};
(function() {
    'use strict';
    var models = app.Model = app.Model || {};

    models.Video = Backbone.Model.extend({
        initialize: function(){
            console.log('model create');
        },
        defaults:{
                 id : "1",
                 url : "/assets/videos/call/MOV01718.mp4",
                 imgSrc : "assets/img/call/1_thumbnail.png",
                 title: "call situation conservation"
        }
    });
  app.Model = new models.Video();
})();

router.js

listRoute: function(id) {
          //generate the collection using the listsection
          var videoList = this.collection;
          var getId = parseInt(id);
            switch (getId) {
              case 1:
                new videoList([
                    {
                      id : "1",
                      url : "/assets/videos/call/MOV01718.mp4",
                      imgSrc : "assets/img/call/1_thumbnail.png",
                      title: "call situation conservation"
                    },
                    {
                      id : "2",
                      url : "/assets/videos/call/MOV01722.mp4",
                      imgSrc : "assets/img/call/2_thumbnail.png",
                      title: "call situation conservation"
                    }
                  ]);
                break;

  //app.router init part
  initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
            // create model and collection once here
            this.model = app.Model;
            this.collection = app.Collection;
        }

请看下图

我觉得一代做的不错
但是我不明白为什么会出现这个错误。

我一开始试过
1. 不要使用 new function 生成集合（作为当前我的来源）
2. 创建变量 videoList 作为 Object.
3. 将 Collection 存储在一个变量中。
4.使用collection.create函数。
例如，list.create({id:'dasdsad'});

然而，这种尝试最终产生了同样的结果。
我该如何解决它们？

Answer 1

命名空间模式的用途是什么？

您误用了名称空间模式。这种情况下的目标是将所有自定义 Backbone classes 构造函数命名为 app 对象。

为了让所有东西清楚地分开，将所有集合构造函数放入 app.Collection 对象中，将模型构造函数放入 app.Model 等

如果在创建所有 class 之后检查 app 命名空间，它应该如下所示：

var app = {
    Collection: {
        VideoList: /* video list constructor */
    },
    Model: {
        Video: /* video model constructor */
    },
    View: {
        /* same thing goes for views */
    }
};

app 命名空间 不应该¹ 包含实例，主要是构造函数。

不要覆盖构造函数引用：

app.Model = new models.Video();

当你只需要一个实例时创建一个实例，并将其保持在需要的范围内。

this.model = new app.Model.Video();
this.collection = app.Collection.VideoList();

实例和构造函数

要真正理解上一点，您需要理解构造函数和实例之间的区别。该概念适用于其他 OOP 语言，但我将在 JavaScript 语言细节中进行描述。

构造函数只是一个函数。来自 MDN doc on Object.prototype.constructor:

All objects will have a constructor property.

[...]

The following example creates a prototype, Tree, and an object of that type, theTree.

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');

如上例所示，要创建实例，请使用 new operator. What is the 'new' keyword in JavaScript?

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

new constructor[([arguments])]

创建自定义构造函数可让您定义自定义类型（classes）。在 JavaScript 中有多种方法可以创建更复杂的自定义类型，但那是另一个讨论。有关详细信息，请参阅 How to “properly” create a custom object in JavaScript?

幸运的是，Backbone 提供了一种简单（自以为是）的方式来定义新类型，extend function, which is available on all the Backbone's base types。

var ModelConstructor = Backbone.Model.extend({ /*...*/ });

var modelInstance = new ModelConstructor();

请注意 myVariable = MyConstructor 只会将构造函数的引用传递给 myVariable，它不会创建新实例。不过，您仍然可以使用变量作为构造函数。

var myInstance = new myVariable();

排序和依赖关系

如果您查看代码，您会注意到 app.Collection.VideoList class 使用 app.Model.Video 作为 model 属性 的值.

这意味着 app.Collection.VideoList 取决于 app.Model.Video class 的可用性。所以集合文件应该插入模型文件之后的文档中。

喜欢你链接了：

<script src="js/models/todo.js"></script><!-- no dependencies -->
<script src="js/collections/todos.js"></script><!-- depends on the model -->
<script src="js/views/todo-view.js"></script><!-- depends on the collection and the model -->
<script src="js/views/app-view.js"></script><!-- depends on the todo-view -->
<script src="js/routers/router.js"></script><!-- depends on the app view -->
<script src="js/app.js"></script><!-- depends on the router -->

---

^{1. app 命名空间对象可以包含一个对象的实例，如果你想在你的所有应用程序之间共享它，比如单例、命名空间全局或服务。}