骨架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

他们依赖于彼此的定义，但是他们会继续加载，这意味着一个人被加载而另一个人没有加载：

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

此时，未定义StudentCollection。

解决方案1 ​​ - 使用Backbone Relational

您要做的是在模型之间创建依赖关系。我的看法是：

项目有很多学生 学生有很多项目。

因此，您正在尝试创建多对多关系。

我建议您尝试以下库：http://backbonerelational.org/

它会帮助你完全按照自己的意愿行事。

解决方案2 - 使默认值为Async

您可以在默认值中返回函数而不是对象，这意味着在声明对象时会对其进行评估，而不是在实例化时对其进行评估。

你可以通过返回默认值而不是像这样的对象来简单地解决这个问题：

    defaults : function() {

    var ProjectCollection = new window.ProjektCollection();

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

在这里查看一个工作小提琴：http://jsfiddle.net/yVSEv/1/