M: Using .triggerMethod

Using it in the DatePicker onSelect method to be captured by the newly instantiated datepicker instance in the view

by kyllle

HTML

<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.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<div class="js-ctn"></div>

<!-- CompositeView Template -->
<script type="text/html" class="js-persons-tmpl">
    <table> 
        <thead>
            <tr>
                <th>Name</th>
                <th>Currect Session</th>
                <th>Available Session</th>
            </tr>
        </thead>
        <tbody class="js-tbody">
        </tbody>
    </table>
</script>


<!-- ItemView Template -->
<script type="text/html" class="js-person-tmpl">
    <% _.each(bookedClasses, function(booked, i) { %>
    <tr data-id="<%= booked %>"> 
        <% if(i == 0) { %>
            <td rowspan="2"><%= name %></td>
        <% } %>
        <td>
            <%= booked %>
            <button class="action action--remove js-action--remove" data-id="<%= booked %>"><svg viewBox="0 0 24 24"><g><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M16.9,15.5l-1.4,1.4L12,13.4l-3.5,3.5   l-1.4-1.4l3.5-3.5L7.1,8.5l1.4-1.4l3.5,3.5l3.5-3.5l1.4,1.4L13.4,12L16.9,15.5z"/></g></svg></button>
        </td>
        <td>
            <input name="scheduledDate" type="text" class="date js-date" />
            <input type="hidden" class="js-date-hidden" />
        </td>
    </tr>
    <% }) %> 
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300, 400, 500);
 body {
    font-family: Roboto;
    color: #191919;
}
a {
    color: #191919;
}

svg {
    overflow: hidden;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-sizing: content-box;
    pointer-events: none;
}

/* Actions */
.action {
    border: none;
    outline: none;
    background: none;
}

.action--remove {
    padding: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.action--remove svg {
   width: 15px;
   fill: black;
}
/* General Table Styles */
 table {
    margin: 0;
    padding: 0;
    width: 100%;
}
table th, table td {
    padding: 10px 20px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}
table th {
    border-width: 2px;
}
table td {
    color: #666;
    position: relative;
    vertical-align: middle;
}
table tr:last-child th, table tr:last-child td {
    border-bottom: none;
}
table tr:nth-child(even) {
    background: #eee;
}

JavaScript

console.clear();

'use strict';

var App = {
    Models: {},
    Views: {},
    Collections: {},
    Regions: {}
}

// Dummy data
var availableClassesData = [{
    "id": 34,
    "name": "Core Evo"
}, {
    "id": 686,
    "name": "Core Body Workout"
}, {
    "id": 870,
    "name": "Boxercise"
}, {
    "id": 1345,
    "name": "Rapid Circuits"
}];

var personsData = [{
    "id": 1,
    "name": "Kenneth Wise",
    "bookedClasses": [
        "375",
        "980"],
    "cancelledClasses": [],
    "swappedClasses": {}
}, {
    "id": 2,
    "name": "Sheila Little",
    "bookedClasses": [
        "234",
        "798"],
    "cancelledClasses": [],
    "swappedClasses": {}
}];

// Model Class
App.Models.Person = Backbone.Model.extend({
	defaults: {
        "dateSelected": ""
    }
});

function formatDate(date) {
    
    // Now check if the date passed in is an array in the format [year, month, day]
    if (Array.isArray(date)) {
        // Convert the date array to UTC
        date = Date.UTC(date[0], date[1] - 1, date[2]);
    }

    return $.datepicker.formatDate("yy-mm-dd", new Date(date));
}

App.Models.FitnessClass = Backbone.Model.extend({});

// Collection Class
App.Collections.Persons = Backbone.Collection.extend({
    model: App.Models.Person
});

App.Collections.FitnessClasses = Backbone.Collection.extend({
    model: App.Models.FitnessClass
});

App.Views.PersonView = Marionette.ItemView.extend({

    template: '.js-person-tmpl',
    
    events: {
		'change input': 'onSelect'
    },
  
    templateHelpers: function () {
        return {
            availableClasses: this.options.availableClasses.toJSON()
        }
    },

    initialize: function () {
        //console.log('PersonView::initialize', this.options, this.model.toJSON());
//        this.model.set('dateSelected', 
       
    },
    
    onRender: function() {
        this.dateSelector = new App.Views.DateSelectorView({
			el: this.$el.find('.js-date')
		});
        
       ...