EmberJS 在不同上下文中使用组件

Question

我正在尝试使用 EmberJS 中的另一个库 bootstrap-switch。

我用 .on('didInsertElement') 添加了以下内容：

$(toggleTag).on('switchChange.bootstrapSwitch', function(event, state) {
      this.sendAction('updateAction', state);
});

但是，调用此事件时，this 的上下文将为 html 元素 toggleTag return object。相反，我需要为 this.

访问 component

处理此问题的推荐方法是什么？

Answer 1

在 ES6 中使用 fat arrows 并继承父级的上下文（如果您使用 ember-cli，推荐这样做）：

$(toggleTag).on('switchChange.bootstrapSwitch', (event, state) => {
  this.sendAction('updateAction', state);
});

在 ES5 中要么使用 bind 来修复函数上下文：

$(toggleTag).on('switchChange.bootstrapSwitch', function(event, state){
  this.sendAction('updateAction', state);
}.bind(this));

或保存上下文：

var that = this;
$(toggleTag).on('switchChange.bootstrapSwitch', function(event, state){
  that.sendAction('updateAction', state);
});

EmberJS Using Component in Different Context