Как создать коллекцию через глобальную переменную в backbone.js?

Question

Мне послан помощь со стороны многих советников в stackoverflow, часть моей проблемы решена, но осталось несколько проблем.

Я консультируюсь с ответом, и я попытался решить проблему, в результате я понял, что 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?

Я страдаю от проблемы, что глобальная переменная успешно создана, однако, я не обрабатывать сгенерированную переменной.

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

Какова цель шаблона namespacing?

Вы неправильно используете шаблон пространства имен. Цель в этом случае заключается в том, чтобы пространство имен всех созданных вами конструкторов классов 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(); 

Инстансы и конструкторы

Чтобы действительно понять предыдущую точку, вы должны понимать разницу между конструктором и экземпляром. Концепция применима к другим языкам ООП, но я буду содержать описание в пределах особенностей языка 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?

К счастью, Backbone предоставляет простой способ умерить новые типы, 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 пространства имен может содержать экземпляр объекта, если вы хотите поделиться между всем вашим приложением, как синглтон, или глобальное пространство имен или служба.}