如何在我的Backbone视图中使用jQueryUI datepicker onSelect以及change事件？

Question

I've got a DateSelectorView that initializes jQuery UI datepicker, I've added the onSelect method which triggers a global event passing the date value. I need the global event to fire but I also need access to the value from within my view, having the 'change input' event in my view though doesn't get acknowledged as DateSelectorView onSelect traps it, can anyone recommend how I can fix this? Is there a way of triggering the global event then letting the DateSelectorView onSelect continue to whatever other events need it?

JS

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());
    },

    onRender: function() {
        this.dateSelector = new App.Views.DateSelectorView({
            el: this.$el.find('.js-date')
        });
    },

    onSelect: function() {
        console.log('date selected');

        // this.model.set('dateSelected', '');
    }
});

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

    template: false,

    tagName: 'input',

    initialize: function() {
        //console.log('DateSelectorView::initialize');

        this.$el.datepicker({
            dateFormat: 'dd M yy',
            altFormat: 'yy-mm-dd',
            altField: '.js-date-hidden',
            showOtherMonths: true,
            selectOtherMonths: true,
            onSelect: function() {
                console.log('date:selected', this.value);

                Backbone.Events.trigger('date:selected', this.value);         
            }
        });
    }
});

JSFiddle: http://jsfiddle.net/kyllle/okmL8k8p/5/

Answer 1

This can be fixed by Backbone events

App.Views.PersonView = Marionette.ItemView.extend({
   initialize: function () {
      App.events.on("doSomething_event", this.onSelect);
   },
   onSelect: function(date) {
      console.log(date);
   }
});

App.Views.DateSelectorView = Marionette.ItemView.extend({
     initialize: function() {
         this.$el.datepicker({
            dateFormat: 'dd M yy',
            altFormat: 'yy-mm-dd',
            altField: '.js-date-hidden',
            showOtherMonths: true,
            selectOtherMonths: true,
            onSelect: function() {
              App.events.trigger("doSomething_event", this.value);
            }
         });
     }
});

App.events = _.extend({}, Backbone.Events);

Hope this will helps you!