使用 ember-bootstrap 操作的正确方法

Question

创建了一个新的 ember Octane 应用程序 (3.15) 并使用 ember-bootstrap。我正在使用这样的模式

<BsModalSimple
  @open={{true}}
  @title="Create new podcast"
  @closeTitle="Cancel"
  @submitTitle="Create"
  @size="lg"
  @closeButton={{false}}
  @fade={{false}}
  @backdrop={{true}}
  @backdropClose={{false}}
  @renderInPlace={{false}}
  @onHidden={{action 'closeModal'}}
  @position="center">
</BsModalSimple>

这有效，但我收到一条错误消息

Do not use action as {{action ...}}. Instead, use the on modifier and fn helper.

在这种情况下使用动作的正确方法是什么？我试过了，但没用

{{on 'hidden' this.closeModal}}

Answer 1

在 classic Ember 模型 (pre-octane) 中，{{action}} 助手用于将正确的 this 上下文绑定到 action/method 作为关闭操作传递。因此，当在任何 class 中调用闭包操作时，该操作将具有调用者的 this 上下文而不是被调用者。

为了更加可预测和明确，此上下文绑定已作为装饰器移动，@action 应该用于装饰您的 closeModal 方法，而不是使用 {{action}} 帮助程序模板。所以，你的代码可以是：

<!-- application.hbs -->

<BsModalSimple
  @open={{true}}
  @title="Create new podcast"
  @closeTitle="Cancel"
  @submitTitle="Create"
  @size="lg"
  @closeButton={{false}}
  @fade={{false}}
  @backdrop={{true}}
  @backdropClose={{false}}
  @renderInPlace={{false}}
  @onHidden={{this.closeModal}}
  @position="center">
</BsModalSimple>

// controllers/application.js

import Controller from "@ember/controller";
import { action } from "@ember/object";

export default class ApplicationController extends Controller {
  @action
  closeModal() {
    // your implementation
  }
}

请注意，错误是由 linter (ember-template-lint) 引发的，错误消息可以更明确地使用 @action 装饰器。

使用 ember-bootstrap 操作的正确方法

Correct way to use actions with ember-bootstrap

ember.js

ember-bootstrap