Question

我正在使用最新的ember js，并有以下观点：

App.PeriodSelectorView = Em.View.extend
  classNames: "period-selector"
  templateName: "period_selector"

  didInsertElement: ->
    @$().draggable()
    @setupTimeSlider()

  setupTimeSlider: ->
    @$(".time-slider").slider
      value: 20
      min: 20 # 0500 in the morning
      max: 83 # 2045 in the evening
      step: 1
      slide: @updateTimeValue

  updateTimeValue: (event, ui) ->
    @set("time", ui.value)

现在，当更改滑块时，会触发回调，但this设置为window而不是视图实例。因此调用this.set失败。

我已经尝试使用coffeescript的胖箭头（updateTimeValue）运算符将方法=>绑定到实例，但它不起作用。

如何让this指向视图实例而不是window？

Answer 1

<强>问题

我不是咖啡师专家，但在我的测试中，似乎使用了=＆gt;运营商。在父函数范围中生成_this = this。例如：

使用：

App = Ember.Application.create()

App.PeriodSelectorView = Em.View.extend  
  ...
  updateTimeValue: (event, ui) =>
    @set("time", ui.value)

生成以下内容：

var App,
  _this = this;

App = Ember.Application.create();

App.PeriodSelectorView = Em.View.extend({
  ...
  updateTimeValue: function(event, ui) {
    // _this here is window object, this isn't what you want
    return _this.set("time", ui.value);
  }
});

解决方案1 

使用匿名函数遵循此逻辑，您将获得预期结果：

更新至以下内容：

App = Ember.Application.create()

App.PeriodSelectorView = Em.View.extend
  ...
  setupTimeSlider: ->
    @$(".time-slider").slider
      value: 20
      min: 20 # 0500 in the morning
      max: 83 # 2045 in the evening
      step: 1
      slide: (event, ui) => #slide now is an anonymous function 
        @set("time", ui.value)

生成：

var App;

App = Ember.Application.create();

App.PeriodSelectorView = Em.View.extend({
  ...
  setupTimeSlider: function() {
    // now _this is the view context
    var _this = this;

    return this.$(".time-slider").slider({
      value: 20,
      min: 20,
      max: 83,
      step: 1,
      slide: function(event, ui) {
        // this will work
        return _this.set("time", ui.value);
      }
    });
  }
});

解决方案2

如果要保留函数的名称，并将函数声明保存在同一位置。您可以使用jQuery.proxy：

App = Ember.Application.create

App.PeriodSelectorView = Em.View.extend
  ...
  setupTimeSlider: ->
    @$(".time-slider").slider
      value: 20
      min: 20 # 0500 in the morning
      max: 83 # 2045 in the evening
      step: 1
      slide: Ember.$.proxy @updateTimeValue, @

  updateTimeValue: (event, ui) ->
    @set("time", ui.value)

我希望它有所帮助

Ember JS和jquery-ui回调范围

1 个答案: