情況
我試圖渲染模型和集合嵌套數據結構的概況觸發相同的事件時Backbone.Marionette範圍問題。 特別是，我正在加載一個SubjectsCollection，其中每個主題都有一些屬性，其中一個屬性應該是嵌套的LessonsCollection。多次使用不同的參數
我的控制器加載了SubjectsCollection。 加載SubjectsCollection後，控制器將呈現SubjectListView（a Marionette.CollectionView）與SubjectsCollection並顯示在Marionette.Region中。
SubjectListView中的每個SubjectModel都被渲染爲SubjectLayout（a Marionette.Layout）。
一旦SubjectListView顯示在Marionette.Region，通過SubjectLayout的一個函數的週期，並觸發對每個SubjectLayout上App.vent一個事件（package-definition:subject:layout:ready）（一個Marionette.EventAggregator），傳遞SubjectLayout作爲參數用於任何回調來接收。
所需的效果
的方法稱爲openLessons反作用於package-definition:subject:layout:ready事件並加載LessonsCollection。這應該發生多次（每次渲染SubjectLayout一次）。
每個LessonsCollection應該呈現LessonsListView和LessonsListView應的區域中顯示在與它們所屬的SubjectsCollection的SubjectLayout。
SubjectLayout的實例假定作爲參數向openLessons方法來傳遞，所以每個LessonsListView可以在它的相應SubjectLayout的所分配的區域中顯示。
守則
這裏是到目前爲止，我已經得到了代碼：
var PackageDefinition_Overview_Controller = Controller.extend({
...
Data: {
packageDefinition: {
// attributes: {
// foo: 'bar',
// subjects: [{
// attributes: {
// baz: 'quux',
// lessons: []
// }
// }]
// }
}
},
// Initialization
//---------------
initialize: function() {
...
this.bindTo(App.vent, "package-definition:subject:layout:ready", this.openLessons);
},
...
openSubjects: function(packageDefinitionOverviewLayout) {
var that = this,
packageDefinition = packageDefinitionOverviewLayout.model;
packageDefinition_id = packageDefinition.get('id'),
subjects = packageDefinition.get('subjects') || new SubjectsCollection(),
subjectsRegion = packageDefinitionOverviewLayout.subjects;
...
subjects.load(packageDefinition_id);
...
subjects.isLoaded.done(function() {
packageDefinition.set({
subjects: subjects
});
that.showSubjectListView(subjectsRegion, subjects);
});
...
},
openLessons: function(subjectLayout) {
var that = this,
subject = subjectLayout.model;
subject_id = subject.get('id'),
lessons = subject.get('lessons') || new LessonsCollection(),
lessonsRegion = subjectLayout.lessons;
...
lessons.load(subject_id);
...
lessons.isLoaded.done(function() {
console.log('Data', that.Data);
subject.set({
lessons: lessons
});
that.showLessonsListView(lessonsRegion, lessons);
});
...
},
...
showSubjectListView: function(region, subjects) {
var subjectsListView = new SubjectsListView(subjects);
region.show(subjectsListView);
// Time to load the Lessons
subjectsLayouts = subjectsListView.children;
_.each(subjectsLayouts, function(subjectLayout) {
App.vent.trigger("package-definition:subject:layout:ready", subjectLayout);
}, this);
},
showLessonsListView: function(region, lessons) {
var lessonsListView = new LessonsListView(lessons);
region.show(lessonsListView);
}
});
問題
儘管事實上，package-definition:subject:layout:ready被多次觸發，以及多個LessonsCollection的get加載。只有最後的SubjectLayout收到它的LessonsListView。
而且，每個SubjectsCollection的'課程'屬性包含最後加載的LessonsCollection。
所以很明顯，這裏有一個範圍問題。
的問題
的問題是：
- 爲什麼所有
SubjectsCollection得到他們的 '教訓' 屬性與上次LessonsCollection覆蓋？ - 爲什麼只有最後一個
SubjectLayout實例收到LessonsListView？ - 如何解決問題？