Dlaczego Ember.js traci wartość powiązania podczas korzystania z datepicker bootstrap?

Question

Zauważyłem, że w mojej aplikacji, kiedy używam poniższego kodu, otrzymuję sformatowaną datę w moim widżecie wyboru daty, ale kiedy klikam Szukaj, konsola pokazuje puste ciągi. Jednak jeśli usunąć metodę didInsertElement tracę popup datepicker ale wiązania z danymi pozostaje i konsola pokazuje daty Wpisałem w.

W moim Kierownice szablonu

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

w moim 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(); 
    } 
}); 

Jakieś pomysły, dlaczego tracę bazę danych po ustawieniu didInsertElement?

Wersje: bootstrap-datepicker,

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

Answer 1

Myślę, że problemem jest to, że zarówno datepicker i żaru zobaczyć wartość zmieniającą się na różne sposoby. Spójrz na to:

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

Gdy Zdarzenie zmiany widget, jeśli zawrócić i wyzwalać zdarzenia zmiany na elemencie, a następnie Ember należy zarejestrować fakt, że wiążąca został zaktualizowany.

Answer 2

To jak ja to robię.

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

Spójrz na mojego klona Ember Bootstrap:

Ember Bootstrap DatePicker