base.js

let filterChecklistItemViewTpl = '<label><input type="checkbox" name="{{name}}"" {{if isActive}}checked{{/if}} />{{title}}</label>';

let filterViewTpl = '<div>{{filterTitle}}:<span data-ui="expandFilterButton" class="down-carret-thing></span></div><div data-region="filterChecklist"></div>';

let FilterChecklistItemView = Marionette.LayoutView.extend({
	template: filterChecklistItemViewTpl,
	ui: {
		'checkbox': 'input[type="checkbox"]'
	},
	events: {
		'click @ui.checkbox': 'toggleItem'
	},
	toggleItem(){
		this.model.set('isActive', this.ui.checkbox.prop('checked'));
	}
});

let FilterChecklistCollectionView = Marionette.CollectionView.extend({
	childView: FilterChecklistItemView
});


let FilterView = Marionette.LayoutView.extend({
	template: filterViewTpl,
	regions: {
		'filterChecklist': '[data-region="filterChecklist"]'
	},
	ui: {
		'expandFilterButton': '[data-ui="exapndFilterButton"]'
	},
	events: {
		'click @ui.expandFilterButton': 'expandFilter'
	},
	expandFilter(event){
		event.preventDefault();
		this.showChildView('filterChecklist', new FilterChecklistCollectionView({
			collection: this.model.get('filterChecklist', this.model)
		}));
		this.triggerMethod('expanded');
	},
	onCollapse(){
		this.region.filterCheckList.empty();
	}
});

let FilterListView = Marionette.CollectionView.extend({
	childView: FilterView,
	onChildviewExpanded(childModel){
		this.children.each((childView)=>{
			if(childModel !== childView.model){
				childView.triggerMethod('collapse');
			}
		});
	}
});