7

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

在我的车把模板中

{{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
4

3 回答 3

10

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

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

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

于 2013-05-03T15:19:25.537 回答
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"}}
于 2013-05-03T01:36:30.307 回答
1

看看我的 Ember Bootstrap 克隆：

Ember Bootstrap 日期选择器

于 2013-05-03T13:17:11.907 回答