backbone.js에서 전역 변수를 통해 컬렉션을 만드는 방법은 무엇입니까?

Question

많은 조언자가 stackoverflow에서 도움을 보냈습니다. 문제가 해결되었지만 몇 가지 문제가 남아 있습니다.

나는 대답을 참조하고 나는 그 결과로 문제를 해결하려고 노력했다. 자바 스크립트 네임 스페이스 패턴을 이해했다.
How do I declare a namespace in JavaScript?

More details on this namespacing pattern

A namespacing pattern to avoid polluting the global namespace. 나는 전역 변수가 성공적 그러나 만들어 졌는지, 내가 생성 된 변수를 처리하지 않는 문제로 고통.

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

아래 그림을 참조하십시오

생성이 제대로 완료되었다고 생각합니다.
하지만 왜이 오류가 발생하는지 이해할 수 없습니다.

나는
2. Object로서 변수 videoList 만들기 (현재 내 소스로) new function과 모음을 생성하지 않습니다 첫째
1에서 시도했다.
3. Collection을 변수에 저장합니다.
4. collection.create 함수를 사용하십시오.
예를 들어이

list.create({id:'dasdsad'}); 그러나이 시도는 결국 같은 결과를 얻었다.
어떻게 해결할 수 있습니까?

Answer 1

네임 스페이스 패턴의 목적은 무엇입니까?

네임 스페이스 패턴을 잘못 사용하고 있습니다. 이 경우의 목표는 모든 사용자 정의 Backbone 클래스 생성자를 app 오브젝트로 이름 지정하는 것입니다. 명확하게 구분 app.Model 내 app.Collection 객체 모델 생성자에 모든 컬렉션 생성자를 넣어 모든 것을 유지하기 위해

, 모든 클래스의 작성 후에는 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 언어에도 적용 할 수 있지만 자바 스크립트 언어 내에서 설명을 유지할 것입니다.

생성자는 단지 하나의 함수입니다. 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])] 

만들기 사용자 정의 생성자는 사용자 정의 유형 (클래스)을 정의 할 수 있습니다. 자바 스크립트에서 더 복잡한 사용자 정의 유형을 만드는 방법은 여러 가지가 있지만 다른 논의가 있습니다. 자세한 내용은, How to “properly” create a custom object in JavaScript?

다행히, 백본 새로운 유형을 정의 할 수있는 쉬운 (독단) 방법을 제공 available on all the Backbone's base types 인 extend function를 참조하십시오. myVariable = MyConstructor 그냥 myVariable에 생성자의 기준을 합격

가

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

var modelInstance = new ModelConstructor(); 

주, 그것은 새로운 인스턴스를 생성하지 않습니다. 그래도 변수를 생성자로 사용할 수 있습니다.

var myInstance = new myVariable(); 

주문 및 종속

당신은 당신의 코드를 보면, 당신은 app.Collection.VideoList 클래스는 model 속성에 대한 값으로 app.Model.Video를 사용하는 것을 알 수 있습니다.

즉, 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 공간 객체가 싱글처럼 개체의 인스턴스를 포함 할 수있다, 또는 네임 스페이스가 지정된 글로벌 서비스 또는 서비스.}