передать функцию стимулу

Question

Я использовал стимулы для своего последнего проекта, и мне нравится, как я могу разбить код на небольшие части, которые можно использовать повторно.

Однако бывают случаи, когда создание нового контроллера и размещение его в качестве атрибута элемента немного громоздко, чтобы дать ему определенную функциональность.

Я не знаю, можно ли создать универсальный контроллер и передать ему функцию или обратный вызов для выполнения. Так что я все еще могу поддерживать сокращенный и чистый код

Answer 1

Одна из причин, по которой Stimulus великолепен, заключается в том, что это более или менее просто Javascript. Таким образом, у вас может быть метод на вашем универсальном контроллере Stimulus, который выглядит примерно так:

        execute() {
    let fname = this.element.getAttribute("data-method")
    // put this in a file somewhere else
    let myFunctionMap = {
      "scroll": () => {
        // just a plain fn
      },
      "otherThing": () => {}
    }
    return myFunctionMap[fname]()
  }

Это позволит вам иметь такую ​​кнопку в HTML:

            <button
        class="button button-primary"
        data-action="generic#execute"
        data-method="scroll">
        Do the thing
      </button>

Не так просто, как простой JS, но довольно близко.

Answer 2

Да, есть.

      // onconnect_controller.js
export default class extends Controller {
  static values = {
    callback: String,
  };

  connect() {
    window[this.callbackValue]();
  }
}

      <div data-controller="onconnect" data-onconnect-callback-value="executeMe"></div>
<script>
    function executeMe() {
        console.log("I was executed");
    }
</script>