Ember JS 和 jquery-ui 回调范围

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

问题

我不是咖啡脚本专家，但在我的测试中，似乎使用了 => 运算符。在父函数范围内生成_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) 

希望对你有帮助