【问题标题】: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 装饰器可以更明确地显示错误消息。

    【讨论】:

      猜你喜欢
      • 2017-04-16
      • 2012-07-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-09-16
      • 2013-03-01
      • 1970-01-01
      相关资源
      最近更新 更多