Question

在给定某条路线的情况下，我无法在视图中触发自定义功能。

通常情况下，如果我访问过/ posts / 1，我的视图中有这个

{{ id }}

id会更新，无论我是从我的应用程序中导航到路线，还是在页面刷新时第一次访问/发布/ 1。

但如果模板不那么直接怎么办？例如，我正在使用具有自己的API的datepicker来更新显示。所以，当数据发生变化时，我需要调用

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}}

Answer 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()

Answer 2

如果您使用的是jquery ui datepicker并需要整个日历，我建议您执行以下操作：

创建日期选择器字段

App.DatePickerField = Ember.TextField.extend({  
    didInsertElement: function() {
      this.$().datepicker();
    }
});

更新模板以使用视图

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

或者，如果您只想使用select标签

绑定月份

App.months = ["JAN", "FEV", "MAR" ...]

<div class="filter-section">
    <div id="dp" class="input-prepend date">
      <span class="add-on"><strong>Month</strong></span>
      {{view Ember.Select contentBinding="App.months" selectionBinding="yourMonth" class="span2" prompt="Select a month" }}
    </div>
  </div>

从路径触发自定义视图功能

2 个答案: