Правильный способ использования действий с ember- bootstrap - PullRequest
Новая
       21

Правильный способ использования действий с ember- bootstrap

1 голос
/ 16 января 2020

Создано новое приложение 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}}

1 Ответ

2 голосов
/ 16 января 2020

В классовой модели c Ember (дооктана), помощник {{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 decorator.

...