3

我想在表单中集成一个日期选择器。所以我创建了一个这样的自定义 DateTimePickerView ：

App.DateTimePickerView = Em.View.extend
  templateName: 'datetimepicker'
  didInsertElement: ->
    self = this
    onChangeDate = (ev) ->
      self.set "value", moment.utc(ev.date).format("dd/MM/yyyy hh:mm")
    @$('.datetimepicker').datetimepicker(language: 'fr', format: 'dd/mm/yyyy hh:ii').on "changeDate", onChangeDate

这是模板：

<script type="text/x-handlebars" data-template-name="datetimepicker" >
  <input type="text" class="datetimepicker" readonly>
</script>

在我的表单中，我想将此组件绑定到我的模型的属性（我正在使用 RestAdapter）：

<script type="text/x-handlebars" id="post/_edit">
  <p>{{view Ember.TextField valueBinding='title'}}</p>
  <p>{{view App.DateTimePickerView valueBinding='date'}}</p>
</script>

一切正常： DateTimePicker 显示良好，值在输入中设置。但是有效绑定有一个问题：当我发送表单时，post参数“日期”（对应于属性）为空。

当我查看生成的 html 代码时，我可以看到以下内容：

<p>
  <input id="ember393" class="ember-view ember-text-field" type="text" value="Event 1">
</p>
<div id="ember403" class="ember-view">
  <input type="text" class="datetimepicker" readonly="">
</div>

我不是全局 ember 结构方面的专家，但我猜想 id 元素对于绑定很重要。在这种情况下，对于我的组件，ember id 被放入组件的容器中，而不是包含该值的输入中。所以我想问题就在这里。

那么让它发挥作用的正确方法是什么？

我刚刚在这里创建了一个工作 jsfiddle ；我们可以看到标题字段中的修改被考虑在内，但没有考虑到 DateTimePickerView 组件中的修改。

4

2 回答 2

1

我终于解决了在使用 moment.js 库时制作一些控件的问题。自定义 datetimepickerview 的绑定过程一切正常。

这是一个有效的jsfiddle：here

相关代码在这里：

window.App.DateTimePickerView = Ember.View.extend(
  templateName: 'datetimepicker'
  didInsertElement: ->
    #this test is important and was the problem
    if @.get 'value' 
      @$('input').val moment.utc(@.get 'value').format('LLL')
    onChangeDate = (ev) =>
      date = moment.utc(ev.date).format('LLL')
      @.set "value", date
    @$('.datetimepicker').datetimepicker(format: 'dd/MM/yyyy', pickTime: false).on "changeDate", onChangeDate
)
于 2013-07-16T08:20:47.473 回答
1

我想问题在于你试图监听从没有捕获的datetimepicker触发的事件，因此没有设置模型值。

为了使事情更加可靠，您应该在将模型保存回商店之前在函数中获取datetimepicker当前日期值。doneEditing

让我用代码说明我的意思：

window.App.EventController = Ember.ObjectController.extend(
  ...

  doneEditing: ->
    // relevant code line
    @get("model").set("date_begin", $('.datetimepicker').data('date'))
    @set "isEditing", false
    @get("store").commit()
  ...
)

在这里你的（工作）jsfiddle。

希望能帮助到你

编辑

阅读您的评论后，我修改了datetimepicker模板中的输入字段。请在此处查看更新的 jsfiddle ，它还会在调用时在编辑开始时初始化datetimepicker的输入字段edit。

...
edit: ->
  @set "isEditing", true
  startDate = @get("model").get("date_begin")
  @$(".datetimepicker").data({date: startDate}).datetimepicker("update")
...

您现在可以安全地删除该函数并分别onDateChange在您的和应用格式或其他内容中执行初始化和保存。editdoneEditing

编辑 2

阅读您的最后一条评论，这就是您注册customEvents的方式，例如App.DateTimePickerView：

  ...
  customEvents: {
    changedate: "changeDate"
  }
  ...

这样 Ember 就会知道您的自定义事件。您可以注册您想要的任何事件，但请注意键名是小写的，并且值必须具有事件名称才能侦听驼峰式。有关自定义事件的更多信息，请参见此处。

请在此处查看注册了自定义事件的另一个更新 jsfiddle 。changeDate

于 2013-06-18T23:42:50.207 回答