javascript - marionette control from backbone controls -

i want create mariontte control consists of 3 backbone controls. first date picker, second numeric stepper , third 1 again date picker. idea first date initial date , numeric stepper adds days , result shown in second date picker. anyway don't know how create marionette view when not child items same. how should approach this?

i think can create compositeview(or layout can work) having 3 divs , render 3 different itemviews in 3 divs explicitly adding el of itemviews in divs

e.g. if following compositeview template

<div id="first-datepicker"></div> <div id="numeric-stepper"></div> <div id="second-datepicker"></div> 

then in compositeview js can render itemviews follows

ui:{     firstdatepicker: "#first-datepicker",     numericstepper: "#numeric-stepper",     seconddatepicker: "#second-datepicker" }, onrender: function(){     this.ui.firstdatepicker.html(new datepickerview().render().el);     this.ui.numericstepper.html(new numericstepperview().render().el);     this.ui.firstdatepicker.html(new datepickerview().render().el); } 

but in case of layout not need explicitly render view, can use show method of layout as

regions:{     firstdatepickerregion: "#first-datepicker",     numericstepperregion: "#numeric-stepper",     seconddatepickerregion: "#second-datepicker" }, onrender: function(){     this.firstdatepickerregion.show(new datepickerview());     this.numericstepperregion.show(new numericstepperview());     this.seconddatepickerregion.show(new datepickerview()); }