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 は適切に表示され、値は入力内に設定されます。しかし、効果的なバインディングには問題があります。フォームを送信すると、投稿パラメーター「日付」(属性に対応) が null になります。

生成された 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 を作成しました。title フィールドの変更は考慮されていますが、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 に答える