How can I port a bound date input helper to HTMLBars?

Question

I'm trying to port a 'DateInputView' TextField extension with a bound helper to HTMLBars. It appears that 'call()' has been removed from 'Handlebars.helpers.view' so the helper doesn't work anymore. I've tried several syntax changes based on forums I've read but nothing works. The field is a datepicker which switches to the native calendar picker when using a mobile device. I see an example where the bound helper is integrated into the view helper code, so uses one js file rather than two, so am trying to go that route now. Code is below. If anyone who knows to to rework it for HTMLBars please let me know.

// ../templates/avail/navigation.hbs
{{date-input id="checkin" valueBinding="controllers.avail.arrival" class="form-control date-picker"}}

// ../views/date-input.js
var DateInputView = Ember.TextField.extend({
  didInsertElement: function(){
    Ember.run.scheduleOnce('afterRender', this, this._setupDateInput);
  },
  _setupDateInput: function(){
    var _this = this;
    var type = Ember.$(this.get('element')).attr('type');
    // Set up Date Picker for object
    if( type === "input" ) {
      Ember.$(this.get('element')).datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
      });
    }
  }
});
export default DateInputView;

// ../helpers/date-input.js
import DateInputView from '../views/date-input';

export default Ember.Handlebars.makeBoundHelper(function(options) {
  Ember.assert('You can only pass attributes to the `input` helper, not arguments', arguments.length < 2);

  var hash = options.hash,
    types = options.hashTypes,
    inputType = hash.type,
    onEvent = hash.on;

  delete hash.type;
  delete hash.on;

  hash.type = "input";

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    hash.type = "date";
  }

  hash.onEvent = onEvent || 'enter';

  return Ember.Handlebars.helpers.view.call(this, DateInputView, options);
});

I changed the return to Ember.Handlebars.helpers.view.helperFunction.call, but the helper still doesn't work. I try to console log out the passed in 'options' and they're undefined now. When I remove the helper, I get errors because the View expects a "date-input" helper. So I stubbed out a new "date-input" Component and the error went away. So since I can't simply port the View Helper over, I'm trying to figure out how to get the process working in a Component now. — bobvan, Mar 16 '15 at 16:35
Embedding a 'makeViewHelper' within a Component doesn't work either. I suspect that this is a new thing in the works and not released yet. I went back to my view helper and found that it actually does have an 'options' obj passed in but it has a lot fewer properties than it used to. The error this time is that options.helperName (normally 'view') is undefined. I'm missing a lot of stuff like boundOptions, hashContexts, hashTypes, etc — bobvan, Mar 16 '15 at 17:48

score 0 · Accepted Answer · answered Apr 01 '15 at 18:36

0

I wound up re-working this viewHelper as a Component.

answered Apr 01 '15 at 18:36

bobvan

251
3
9

How can I port a bound date input helper to HTMLBars?

1 Answers1