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

【问题标题】：How can I use jQueryUI datepicker onSelect but also the change event in my Backbone view?如何在我的 Backbone 视图中使用 jQueryUI datepicker onSelect 以及 change 事件？
【发布时间】：2015-10-16 10:03:10
【问题描述】：

我有一个 DateSelectorView 来初始化 jQuery UI 日期选择器，我添加了 onSelect 方法来触发一个传递日期值的全局事件。我需要触发全局事件，但我还需要从我的视图中访问该值，在我的视图中有“更改输入”事件虽然没有被确认为 DateSelectorView onSelect 陷阱它，任何人都可以推荐我如何解决这个问题?有没有办法触发全局事件，然后让 DateSelectorView onSelect 继续处理其他需要它的事件？

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/

【问题讨论】：

标签： javascript jquery jquery-ui backbone.js datepicker

【解决方案1】：

这可以通过 Backbone 事件修复

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);

希望对你有帮助！

【讨论】：