Why does Ember.js lose the valueBinding when I use bootstrap datepicker?

Question

I am noticing that in my application when I use the below code I am given a formatted date in my date picker widget but when I click search the console shows empty strings. However if I remove the didInsertElement method I lose the datepicker popup but the databinding remains and the console shows the dates I typed in.

In my handlebars template

{{view App.DateField valueBinding="controller.startDate" classNames="startDate"}}
{{view App.DateField valueBinding="controller.endDate" classNames="endDate"}}
<button {{action "search" target='controller'}}>Search</button>

In my App

App.ApplicationController = Ember.ArrayController.extend({
  search: function() {
    console.log(this.get('startDate'));
    return console.log(this.get('endDate'));
  }
});

App.DateField = Ember.TextField.extend({
  didInsertElement: function() {
    return this.$().datepicker();
  }
});

Any ideas why I lose the databinding when I set the didInsertElement?

Versions: bootstrap-datepicker,

handlebars-1.0.0-rc.3
ember-1.0.0-rc.3
jQuery 1.9.1

Answer 1

I think the problem is that the datepicker and ember both see the value changing in different ways. Take a look at this:

  App.DateField = Ember.TextField.extend(
    didInsertElement: ->
      @.$().datepicker().on 'changeDate', =>
        @.$().trigger('change')
  )

When the widget change event fires, if you turn around and trigger the change event on the element, then Ember should register the fact that a binding was updated.

Answer 2

This is how I am doing it.

App.DatePicker = Ember.View.extend
  tagName: "input"
  date: null
  attributeBindings: ['value','format','readonly','type','size']
  size:"16"
  type: "text"
  format:'mm/dd/yyyy'

  value: ( ->
    if date = @get('date')
      date
   else
     ""
  ).property('date')

  didInsertElement: ->
    fmt = @get('format')

    onChangeDate = (ev) =>
      @set 'date', ev.date

    @.$().datepicker(
      format: fmt,
      autoclose: true
    ).on('changeDate', onChangeDate)

  willDestroyElement: -> @$().datepicker('remove')


#in your template
{{view App.Datepicker dateBinding="content.date"}}

Answer 3

Take a look at my Ember Bootstrap clone:

Ember Bootstrap DatePicker