Wie erstelle ich Sammlung durch globale Variable in backbone.js?

Question

Ich werde die Hilfe von vielen Beratern in stackoverflow geschickt, in Teil meines Problems ist gelöst, aber ein paar Probleme sind geblieben.

Ich konsultiere die Antwort, und ich habe versucht, das Problem zu lösen, als Ergebnis daraus verstand ich die Javascript Namespacing pattren.

A namespacing pattern to avoid polluting the global namespace.
More details on this namespacing pattern
How do I declare a namespace in JavaScript?

Ich leide an Problem, dass die globale Variable erfolgreich jedoch erstellt wird, weiß ich die erzeugte Variable nicht handhaben.

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; 
     } 

Bitte sehen Sie das Bild unten

Ich denke, die Generation wurde richtig gemacht.
Aber ich verstehe nicht, warum ich diesen Fehler bekomme.

habe ich versucht, auf den ersten
1. Sammlung mit new function nicht erzeugen Sie (als Strom meine Quelle)
2. Variable videoList als Objekt erstellen.
3. Speichert Collection in einer Variablen.
4. Verwenden Sie die Funktion collection.create.
Zum Beispiel list.create({id:'dasdsad'});

jedoch dieser Versuch ergab schließlich das gleiche Ergebnis.
Wie kann ich sie lösen?

Answer 1

Welchen Zweck hat das Namespacing-Muster?

Sie missbrauchen das Namensraummuster. Das Ziel in diesem Fall besteht darin, alle benutzerdefinierten Backbone-Klassenkonstruktoren in das app-Objekt einzubinden.

Um alles zu halten, klar getrennt, alle Ihre Sammlungen Konstruktor in die innerhalb app.Modelapp.Collection Objekt, Modelle Konstruktor setzen usw.

Wenn Sie den app Namensraum inspizieren, nachdem alle Klassen erstellt werden, sollte es aussehen die folgenden:

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

der app Namespace sollte nicht Instanzen enthalten, vor allem Konstrukteure.

Sie die Konstrukteurs-Referenzen nicht überschreiben:

app.Model = new models.Video(); 

eine Instanz erstellen, wenn Sie ein nur brauchen, und es im Rahmen halten sie gebraucht wird.

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

Instanzen und Konstrukteuren

wirklich auf den vorherigen Punkt zu verstehen, müssen Sie die Unterschiede zwischen einem Konstruktor und einer Instanz verstehen. Das Konzept ist auf andere OOP-Sprachen anwendbar, aber ich behalte die Beschreibung innerhalb der JavaScript-Sprachspezifika.

Ein Konstruktor ist nur eine Funktion. Von der MDN doc on Object.prototype.constructor:

haben alle Objekte eine constructor Eigenschaft.

[...]

Im folgenden Beispiel wird ein Prototyp erstellt, Tree, und ein Objekt dieses Typs , theTree.

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

var theTree = new Tree('Redwood'); 

Wie im vorhergehenden Beispiel zu sehen ist, ein Beispiel, verwenden, um die new operator zu erstellen. What is the 'new' keyword in JavaScript?

Der neue Operator erstellt eine Instanz eines benutzerdefinierten Objekttyp oder eines der eingebauten Objekttypen, die eine Konstruktionsfunktion hat.

new constructor[([arguments])] 

Erstellen von benutzerdefinierten Konstrukteure können Sie benutzerdefinierte Typen (Klassen) zu definieren. Es gibt mehrere Möglichkeiten, komplexere benutzerdefinierte Typen in JavaScript zu erstellen, aber das ist eine andere Diskussion. Weitere Einzelheiten finden Sie How to “properly” create a custom object in JavaScript?

Glücklicherweise Backbone bietet einen einfachen (opinionated) Weg, um neue Typen zu definieren, die extend function, die available on all the Backbone's base types ist.

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

var modelInstance = new ModelConstructor(); 

Beachten Sie, dass myVariable = MyConstructor wird nur eine Referenz des Konstruktor myVariable passieren, es wird nicht eine neue Instanz erstellen. Sie könnten die Variable trotzdem als Konstruktor verwenden.

var myInstance = new myVariable(); 

Reihenfolge und Abhängigkeiten

Wenn Sie auf den Code anschauen, werden Sie feststellen, dass die app.Collection.VideoList Klasse die app.Model.Video als Wert für die model Eigenschaft verwendet. Dies bedeutet, dass app.Collection.VideoList von der Verfügbarkeit der Klasse app.Model.Video abhängig ist. Daher sollte die Sammlungsdatei nach der Modelldatei in das Dokument eingefügt werden.

Wie in the other answer of mine Sie verknüpft:

<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. Der app Namespace-Objekt eine Instanz eines Objekts enthalten könnte, wenn man es zwischen all Ihre App teilen möchten, wie ein Singleton, oder ein Namespaced Global oder ein Service.}