0

我在 Ember 视图中包装了一个引导日期选择器，但我对结果不太满意。有没有更清洁的方法来做到这一点？

App.DatepickerView = Ember.View.extend({

  classNames: ['dp'],

  didInsertElement: function() {
    var _this = this;

    this.$().datepicker({'format': 'M yyyy','minViewMode': 'months'})
      .on('changeDate', function(e) {
        var id = $(this).datepicker().data('date').replace(" ", "-");

        _this.get('controller').transitionToRoute('month', App.Month.find(id));
      });

    this.$('.month.active').removeClass('active');

    if (this.get('controller.controllers.month.content')) {
      this.update();
    }

  },

  update: function() {
    var month = moment( this.get('controller.controllers.month.id') );
    this.$().datepicker('hide');
    this.$().datepicker('setDate', month.toDate());
    this.$().datepicker('show');
  }.observes('controller.controllers.month.content')

});

具体来说，我想

  • 更惯用地处理changeDate事件，无论是在我的模板中还是通过click处理程序
  • 如果我们从一个月开始通过数据绑定解决日期更新（目前我检查是否controllers.month.content设置，并更新日期选择器didInsertElement

感谢您的任何建议！

4

1 回答 1

2

我对 bootstrap-datepicker 一无所知，但我相信你必须编写一个像这样的基本集成并将你的 Datepicker 建立在它的基础上。我使用 jQuery UI 而不是 Bootstrap 做了类似的事情。

// generic logic so that options and event handlers can be declared nicely
App.GenericDatePickerView = Ember.View.extend({
  didInsertElement: function() {
    var options = this._gatherOptions();

    var datepicker = this.$().datepicker(options);
    this.get("uiEvents").forEach(function(uiEvent){
      datePicker.on(uiEvent, function(){
        var fn = that.get(uiEvent);
        fn.call(that);
      });
    });
    this.set("datepicker", datepicker);
  },
  _gatherOptions: function() {
    var uiOptions = this.get('uiOptions'), options = {};
    uiOptions.forEach(function(key) {
      options[key] = this.get(key);
    }, this);

    return options;
  }
});

App.YourDatePicker = App.GenericDatePickerView.extend({
    uiOptions : ["format", "minViewMode"],
    uiEvents : ["onChange"],

    format : "M yyyy",
    minViewMode : "months",
    onChange : function(){
        var id = this.get("datepicker").data('date').replace(" ", "-");
        this.get('controller').transitionToRoute('month', App.Month.find(id));
    }
});

注意：我没有测试过这段代码，但这是基本方法。您将 DatePicker 上的选项和事件处理程序声明为普通属性。Generic Class 负责将所有这些东西传递给底层的 datepicker 对象。

这种方法的灵感来自Luke Melia 的 repo，该 repo再次受到 EmberJS 的两位创建者 Tom Dale 和 Yehuda Katz 的代码的启发。

于 2013-08-06T11:55:13.707 回答