Tại sao Ember.js mất giá trịGiống buộc khi tôi sử dụng công cụ datepicker bootstrap?

Question

Tôi nhận thấy rằng trong ứng dụng của mình khi tôi sử dụng mã bên dưới, tôi được cung cấp ngày được định dạng trong tiện ích bộ chọn ngày nhưng khi tôi nhấp vào tìm kiếm, bảng điều khiển sẽ hiển thị chuỗi rỗng. Tuy nhiên nếu tôi loại bỏ các didInsertElement phương pháp tôi đã làm mất datepicker cửa sổ bật lên nhưng databinding vẫn và giao diện điều khiển cho biết ngày tôi gõ vào.

Trong tay lái của tôi Mẫu

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

Trong App của tôi

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

Bất kỳ ý tưởng nào tại sao tôi mất dữ liệu khi tôi đặt didInsertElement?

phiên bản: bootstrap-datepicker,

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

Answer 1

Tôi nghĩ vấn đề là datepicker và ember cả nhìn thấy giá trị thay đổi theo những cách khác nhau. Hãy xem xét điều này:

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

Khi sự kiện thay đổi tiện ích kích hoạt, nếu bạn quay lại và kích hoạt sự kiện thay đổi trên phần tử, thì Ember phải đăng ký thực tế là ràng buộc đã được cập nhật.

Answer 2

Đây là cách tôi làm việc đó.

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

Hãy nhìn vào bản sao Ember Bootstrap của tôi:

Ember Bootstrap DatePicker