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

ember.js, handlebars.js, twitter-bootstrap

Solution

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.

Problem

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 ```

Original source