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

【问题标题】：Correct way to use actions with ember-bootstrap使用 ember-bootstrap 操作的正确方法
【发布时间】：2020-01-16 01:04:17
【问题描述】：

创建了一个新的 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>

这可行，但我收到一个错误，上面写着

不要将action 用作{{action ...}}。相反，请使用 on 修饰符和fn 助手。

在这种情况下使用操作的正确方法是什么？这个我试过了，还是不行

{{on 'hidden' this.closeModal}}

【问题讨论】：

标签： ember.js ember-bootstrap

【解决方案1】：

在经典的 Ember 模型（pre-octane）中，{{action}} 帮助器用于将正确的 this 上下文绑定到作为闭包操作传递的操作/方法。因此，当在任何类中调用闭包动作时，该动作将具有调用者的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 装饰器可以更明确地显示错误消息。

【讨论】：