1

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

1 回答 1

2

在经典的 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 装饰器。

于 2020-01-16T05:17:21.300 回答