Ember JS 和 jquery-ui 回调范围

Posted 2023-03-03

【中文标题】Ember JS 和 jquery-ui 回调范围

【英文标题】：Ember JS and jquery-ui scope of callbacks

【发布时间】：2013-11-30 15:01:00

【问题描述】：

我正在使用最新的 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？

【问题讨论】：

您能否详细说明您如何尝试使用=>？这个答案似乎暗示它应该工作：***.com/questions/8965855/…

我只是使用 => insteaf of -> 作为 updateTimeValue。但是我只是从编译的代码中看到，实际上这并没有做任何事情。原因似乎是我不使用“class App.PeriodSelectorView extends Em.View”。但是我不能使用这种形式，因为这样就没有任何效果，只会抛出一堆异常......我必须深入研究一下。

【参考方案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) 

希望对你有帮助

【讨论】：

谢谢马尔西奥！我不能再尝试你的方法了，因为我完全改变了我的实现，它现在基于github.com/lukemelia/jquery-ui-ember，但我相信我将来会需要这些概念。

没问题。很高兴为您提供帮助！