Perché Ember.js perde il valoreBinding quando utilizzo bootstrap datepicker?

Question

Mi accorgo che nella mia applicazione quando uso il codice seguente mi viene data una data formattata nel mio widget di selezione data, ma quando faccio clic su Cerca la console mostra stringhe vuote. Tuttavia, se tolgo il metodo didInsertElement perdo il popup DatePicker ma l'associazione dati rimane e la console mostra le date ho digitato.

Nel mio modello di manubrio

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

nella mia 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(); 
    } 
}); 

Qualche idea del motivo per cui ho perso il databinding quando ho impostato il didInsertElement?

Versioni: bootstrap-datepicker,

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

Answer 1

Credo che il problema è che il DatePicker e brace sia vedere il valore cambia in modi diversi. Date un'occhiata a questo:

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

Quando l'evento widget di cambiamento, se si gira intorno e attivare l'evento cambiamento sull'elemento, quindi Ember dovrebbe registrare il fatto che un legame è stato aggiornato.

Answer 2

Ecco come lo faccio.

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

Date un'occhiata a mio clone Ember Bootstrap:

Ember Bootstrap DatePicker