JSFiddle - React, Tailwind, and code Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://xdsoft.net/scripts/jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="http://xdsoft.net/scripts/jquery.datetimepicker.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.js"></script>
<header>
    
<h1>CompositeView demo</h1>

</header>
<button type="button" class="btn btn-success reload-button">Reload views</button>
</br>
</br>
<script type="text/html" id="movie-list">
    <div class = "panel panel-primary" > <div class = "panel-heading" > 
        <h3 class = "panel-title" > Composite view: Movie listing (rndm id: <%  this.rndmval = Math.floor((Math.random()*1000)+1);; %><%=  rndmval %>)</h3>           
        </div > <div class = "panel-body" > </div>
</div >
</script>l
<script type="text/template" id="movie-list-item">
    <strong>Title: <%= title %></strong>
    </br>
    Should release on: 
    <input class = "datetimepicker" type = "text" value = "<%= date %>">
</script>
<div id="container1"></div></br></br>
<div id="container2"></div>

CSS

li {
    height: 40px;
}
li > button {
    float: right;
}

JavaScript

// Define a collection
var col = Backbone.Collection.extend({});
var colInstance = new col();
colInstance.set([{
    title: "Braveheart",
    date: "2014/04/21 10:00"
}, {
    title: "Gone in 59 seconds!",
    date: "2014/04/23 18:33"
}, {
    title: "Top gun",
    date: "2014/04/25 23:40"
}]);

// Itemview
var movieItemView = Marionette.ItemView.extend({
    tagName: "li",
    className: 'listItem',
    template: "#movie-list-item",
    ui: {
        dateInput: '.datetimepicker'
    },
    onShow: function () {
        // Invoke the datetimepicker plugin
        this.ui.dateInput.datetimepicker({
            // Lazy init to prevent a lot of instances right away
            lazyInit: true,
            closeOnDateSelect:true,
            
            // Proxy the callback function to retain view scope
            onChangeDateTime: $.proxy(this.changeDate, this)
        });
    },
    changeDate: function (dp, $input) {
        this.model.set('date', $input.val());
    },
    onClose: function () {
        // Destroy the datetimepicker plugin
        this.ui.dateInput.datetimepicker('destroy');
    },
    modelEvents: {
        'change:date': 'updateDate'
    },
    updateDate: function () {
        // Check if we need to update the date. 
        var modelDate = this.model.get('date');
        if (modelDate != this.ui.dateInput.val()) {
            this.ui.dateInput.val(modelDate);
        }
    }
});

// Composite view
var movieCompView = Marionette.CompositeView.extend({
    template: "#movie-list",
    itemViewContainer: ".panel-body",
    itemView: movieItemView
});

// Create a region
var rm = new Marionette.RegionManager();
rm.addRegion("container1", "#container1");
rm.addRegion("container2", "#container2");

// Show the collectionView
function showViews() {
    rm.get('container1').show(new movieCompView({
        collection: colInstance
    }));
    rm.get('container2').show(new movieCompView({
        collection: colInstance
    }));
}
showViews();

//...