Marionette UI Problem

UI problem on views when rendered as a tree

by Simon Dion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.0.0/backbone.marionette.js"></script>
<div id="main-region"></div>

JavaScript

var inc = 1;


var SomeListItem = Mn.View.extend({
  template: _.template('List Element #<%=id%> <a href="#">Click me</a><ul class="sublist"></ul>'),
	tagName:'li',
  events: {
  	'click a':'onLinkClicked',
  },
  regions: {'sublist':{el: '.sublist', replaceElement:true}},
  onRender: function(){
  	this.showChildView('sublist', new SomeList({level: this.getOption('level')+1}));
  },
  onLinkClicked: function(event){
  	alert('You clicked element ' + this.model.get('id') + ' !');
  	event.preventDefault();
    return false;
  }
});
var SomeList = Mn.CollectionView.extend({
	tagName: 'ul',
	initialize: function(){
  	this.collection = new Backbone.Collection();
    if(this.getOption('level')<3){
    	var c = Math.random()*3;
      for(var i = 0; i < c; i++)this.collection.add({id: inc++})
    }
  },
  childView: SomeListItem,
  childViewOptions: function(){ return {level: this.getOption('level')}; },
});

const MyModel = Backbone.Model.extend();

const MyView = Mn.View.extend({
  template: _.template('<h1><%= title %></h1>')
});

const App = Mn.Application.extend({
  region: '#main-region',

  onBeforeStart(app, options) {
    this.model = new MyModel(options.data);
  },

  onStart(app, options) {
    this.showView(new SomeList({
      level: 0
    }));
    Backbone.history.start();
  }
});

const app = new App();

app.start({
  data: {
    title: 'Marionette says hello!'
  }
});