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

Question

我发送了很多顾问的帮助，在我的问题部分解决了，但仍然存在一些问题。

我咨询了答案，我试图解决问题，因为它我了解JavaScript命名空间pattren。

A namespacing pattern to avoid polluting the global namespace.
More details on this namespacing pattern
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。
3.在变量中存储Collection。
4.使用collection.create函数。
例如，list.create({id:'dasdsad'});

然而，这种尝试最终得到相同的结果。
我该如何解决它们？

Answer 1

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

您正在滥用命名空间模式。在这种情况下，目标是将所有自定义Backbone类构造函数命名为app对象。

为了把一切都清楚地分开，把你所有的集合构造成app.Collection对象，模型构造函数中app.Model等

如果检查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：

所有对象都会有一个constructor财产。

[...]

下面的示例创建一个原型，Tree，而且 类型的对象，theTree。

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

var theTree = new Tree('Redwood'); 

在前面的例子中所看到的，创建一个实例，使用new operator。 What is the 'new' keyword in JavaScript?

的新的运营商创建一个用户定义的对象类型的实例或之一的 内置在具有构造函数的对象类型。

new constructor[([arguments])] 

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

幸运的是，骨干提供了一个简单（自以为是）的方式来定义一个新类型，在extend function，这是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类使用app.Model.Video作为model属性的值。

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

像the other answer of mine您链接：

<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命名空间对象可以包含一个对象的实例，如单，或名称空间的全局或服务。}