我如何使用jQueryUI日期picker onSelect，但也在我的主干视图的变化事件

How can I use jQueryUI datepicker onSelect but also the change event in my Backbone view?

本文关键字：我的 视图 事件 变化 jQueryUI 何使用 日期 picker onSelect      更新时间：2023-09-26

我有一个初始化jQuery UI日期拾取器的DateSelectorView，我已经添加了触发传递日期值的全局事件的onSelect方法。我需要全局事件来触发，但我也需要从我的视图中访问值，在我的视图中有"更改输入"事件，虽然没有被确认为dateselectorviewonselect陷阱，有人能建议我如何解决这个问题吗?是否有一种触发全局事件的方法，然后让DateSelectorView onSelect继续任何其他事件需要它?

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/

这可以通过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);

希望这对你有帮助!

相关文章：