骨幹js嵌套集合未定義

Question

我想將主幹模型相互關聯。我有一個學生模型和集合，以及一個項目模型和集合。一個學生模型擁有一個嵌套的項目集合。就像你看到下面。這工作正常！

window.Student = Backbone.Model.extend({ 
    urlRoot : "/api/student", 
    initialize : function() { 

    }, 

    idAttribute : 'bid', 

    defaults : { 
     "bid" : null, 
     "vorname" : "", 
     "nachname" : "", 
     "email" : "", 
     "projekte" : new ProjektCollection() 
    }, 
    parse : function(response) { 
     console.log(response); 
     response.projekte = new ProjektCollection(response.projekte); 
     return response; 
    }, 
}); 

window.StudentCollection = Backbone.Collection.extend({ 
    model : Student, 
    url : "/api/student", 

    parse : function(response) { 
     this.subalbums.reset(response.subalbum); 
     delete response.subalbum; 
     return response; 
    } 
}); 

查看我從服務器收到的JSON。

{ 
"name":"Jon", 
"beschreibung":"echt so", 
"videourl":"invalidURL", 
"studenten": [{"bid":1,"vorname":"M","nachname":"mf","email":"m.d@d.de"}], 
"modulnummer":"5110", 
"bid":101, 
"images":["1.jpg","2.jpg","3.jpg"], 
"bilddir":"38b3eff8baf56627478ec76a704e9b52" 
} 

我添加一個StudentCollection到Projekt model我的問題就立即開始。 StudentCollection和ProjektCollection未定義。這裏是我的Projekt模型/收集代碼

window.Projekt = Backbone.Model.extend({ 

    idAttribute : 'bid', 

    initialize : function(options) { 

    }, 

    defaults : { 
     "name" : "", 
     "beschreibung" : "", 
     "videourl" : "", 
     "modulnummer" : "", 
     "bid" : null, 
     "pictures" : '', 
     "kommentare" : "", 

      // this line breaks it together with the parse function 
     "studenten" : new StudentCollection(), 

      // this line works 
     // "studenten" : '', 

     "inPortfolio" : 'false', 
     "bilddir" : "", 
     "titelbild" : "../img/placeholder.png" 

    }, 

    // breaks it as well 
    parse : function(response) { 
     console.log(response); 
     response.studenten = new StudentCollection(response.studenten); 
     return response; 
    } 
}); 

window.ProjektCollection = Backbone.Collection.extend({ 
    initialize : function(options) { 
     if (options) { 
      this.modulnummer = options.modulnummer; 
      this.portfolio = options.portfolio; 
     }; 
    }, 

    model : Projekt, 

}); 

這是爲了在我加載腳本在我的index.html及以下，你看到在控制檯顯示錯誤消息。我也把代碼放在一個JSFiddle

<script src="js/models/projektModel.js"></script> 
    <script src="js/models/studentModel.js"></script> 

Uncaught ReferenceError: StudentCollection is not defined projektModel.js:23 
Uncaught ReferenceError: ProjektCollection is not defined studentModel.js:14 
Uncaught ReferenceError: ProjektCollection is not defined modulmodel.js:22 

感謝定義

Answer 1

他們互相依賴，但它們的加載sequently，意思而另一個沒有一個被加載：

window.Projekt = Backbone.Model.extend({ 
... 
defaults : { 
    ... 
    "studenten" : new StudentCollection(), 
} 
} 

此時，StudentCollection未定義。

解決方案1 ​​ - 使用主幹關係

你所要做的是創建模型之間的依賴關係。我看到的方式是：

項目有很多學生。
學生有很多項目。

所以你試圖創建一個多對多的關係。

我建議你嘗試以下庫：http://backbonerelational.org/

它會幫你做你想要什麼。

解決方案2 - 使默認異步

您可以返回一個函數，而不是在默認的對象，這意味着它在聲明對象時，而不是當它被實例化被評估。

您可以通過默認設置，像這樣返回一個函數，而不是對象的簡單解決這個問題：

defaults : function() { 

    var ProjectCollection = new window.ProjektCollection(); 

    return { 
     "bid" : null, 
     "vorname" : "", 
     "nachname" : "", 
     "email" : "", 
     "projekte" : ProjectCollection 
    } 
}, 

看到這裏工作小提琴：http://jsfiddle.net/yVSEv/1/