boxItemView.js

'use strict';

import Marionette from 'marionette';
import viewTpl from './boxItemView.hbs!';
import TrashListView from './trashListView.js';

export default Marionette.LayoutView.extend({
  template: viewTpl,
  tagName: 'li',
  regions: {
    'trash': '[data-region="trash"]',
  },
  onRender(){
    let trashListView = new TrashListView({
      collection: this.model.get('trash'),
    });
    this.showChildView('trash', trashListView)
  },
});

boxListView.js

'use strict';

import Marionette from 'marionette';
import BoxItemView from './boxItemView.js';

export default Marionette.CollectionView.extend({
  tagName: 'ul',
  childView: BoxItemView
});

dumpsterView.js

'use strict';

import Marionette from 'marionette';
import viewTpl from './dumpsterView.hbs!';
import BoxListView from './boxListView.js';

export default Marionette.LayoutView.extend({
  template: viewTpl,
  regions: {
    'boxes': '[data-region="boxes"]',
  },
  onRender(){
    let boxListView = new BoxListView({
      collection: this.model.get('boxes'),
    });
    this.showChildView('boxes', boxListView)
  },
});

trashItemView.js

'use strict';

import Marionette from 'marionette';
import viewTpl from './trashItemView.hbs!';

export default Marionette.LayoutView.extend({
  template: viewTpl,
  tagName: 'li'
});

trashListView.js

'use strict';

import Marionette from 'marionette';
import TrashItemView from './trashItemView.js';

export default Marionette.CollectionView.extend({
  tagName: 'ul',
  childView: TrashItemView
});