1

特定のルートを指定すると、ビューでカスタム機能をトリガーするのに問題があります。

通常、/posts/1 にアクセスし、ビューにこれが含まれていた場合

{{ id }}

アプリ内からルートに移動した場合でも、ページの更新時に初めて /posts/1 にアクセスした場合でも、ID は更新されます。

しかし、テンプレートがそれほど単純でない場合はどうなるでしょうか? たとえば、表示を更新するための独自の API を持つ日付ピッカーを使用しています。したがって、データが変更されたら、呼び出す必要があります

this.$('#dp').datepicker('setDate', month)

アプリ内からルートが変更された場合はこれが機能しますが、ユーザーがこれらのルートのいずれかで開始した場合はどうなりますか? ビューにカスタムメソッドを追加してみました

App.DatepickerView = Ember.View.extend({
    didInsertElement: function() {
        ....
    },

    setMonth: function(month) {
        this.$('#dp').datepicker('setDate', month.get('id'));
    }
});

次のようにルートにフックします。

App.MonthRoute = Ember.Route.extend({
    setupController: function(controller) {
        App.DatepickerView.setMonth(controller.get('model'));
    }
})

しかし、私はそれsetMonthが未定義であることを取得しています。これについて正しい方法は何ですか？

更新: Datepicker のテンプレートは次のとおりです。

{{#view App.DatepickerView }}
  <div class="filter-section">
    <div id="dp" class="input-prepend date">
      <span class="add-on"><strong>Month</strong></span>
      <input class="span2" type="text" placeholder="Select a month">
    </div>
  </div>
{{/view}}
4

2 に答える 2

1

少し違う方法でこれにアプローチできると思います。ビューでメソッドを直接呼び出そうとするのではなく、バインドされたコンテンツを日付ピッカー ビューに渡します。syncDates メソッドを使用して、値を JQUI ウィジェットにマッピングする実際の作業を行います (ここではニーズが若干異なる場合があります)。

テンプレート内:

{{view App.DateView valueBinding="some_date"}}

コードを表示:

App.DateView = Em.View.extend
  template: Em.Handlebars.compile '<input type="text" /><input type="hidden" {{bindAttr value="view.value"}} />'
  syncDates: ( ->
    if (elm = @$('input[type=text]') ).length && d = @get 'value'
      d = d.split '-'
      elm.val d[1] + '/' + d[2] + '/' + d[0]
  ).observes 'value'

  didInsertElement: ->
    return unless $.datepicker
    @$('input[type=text]').datepicker
      altField:   @$ 'input[type=hidden]'
      format:     'mm/dd/yy'
      altFormat:  'yy-mm-dd'

      onSelect: (dateText, inst) =>
        @set 'value', @$('input[type=hidden]').val()
于 2013-07-23T18:13:59.610 に答える