Ember.js：如何在自定义组件上绑定模型属性

Question

我想在表单中集成一个日期选择器。所以我创建了一个这样的自定义 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 here ；我们可以看到标题字段中的修改被考虑在内，但没有考虑到 DateTimePickerView 组件中的修改。

Answer 1

我想问题在于您试图监听从 datetimepicker 触发的事件，但该事件未被捕获，因此未设置模型值。

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

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

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 模板中的输入字段。请参阅here an updated jsfiddle，它还会在调用edit 时在编辑开始时初始化datetimepicker 的输入字段。

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

您现在可以安全地删除onDateChange 函数并分别在edit 和doneEditing 中执行初始化和保存，应用格式或其他方式。

编辑 2

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

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

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

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

Answer 2

我终于解决了在使用 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
)