如何通過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命名空間對象可以包含一個對象的實例，如單，或名稱空間的全局或服務。}