当我使用bootstrap datepicker时,为什么Ember.js会丢失valueBinding?

时间:2013-05-02 18:56:55

标签: twitter-bootstrap ember.js handlebars.js

我注意到在我的应用程序中,当我使用下面的代码时,我在日期选择器小部件中给出了格式化日期,但是当我单击搜索时,控制台显示空字符串。但是,如果我删除didInsertElement方法,则会丢失datepicker弹出窗口,但数据绑定仍然存在,控制台会显示我输入的日期。

在我的车把模板中

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

在我的应用程序中

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

我在设置didInsertElement时错过了数据绑定的任何想法?

版本: bootstrap-datepicker

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

3 个答案:

答案 0 :(得分:10)

我认为问题在于,datepicker和ember都会以不同的方式看到值的变化。看看这个:

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

当窗口小部件更改事件触发时,如果您转向并触发元素上的更改事件,则Ember应注册绑定已更新的事实。

答案 1 :(得分:3)

这就是我的做法。

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"}}

答案 2 :(得分:1)

看看我的Ember Bootstrap克隆:

Ember Bootstrap DatePicker