고급 자극: 사용자 정의 작업 옵션

이 글은 원래 Rails Designer에 게시되었습니다

---

Stimulus를 사용하면 나만의 사용자 지정 작업 옵션을 등록할 수 있습니다. 이것은 keypress->input#validate:prevent(당신이 알지 못했던 Stimulus 기능에 대한 기사에 표시된 대로)와 같이 작업에 추가할 수 있는 것입니다. :prevent는 작업 옵션이며 기본 이벤트를 방지합니다. 사용 가능한 다른 옵션은 :stop 및 :self입니다.

직접 만들 수도 있습니다! Stimulus에서 더 많은 것을 짜낼 수 있습니다(간단한 프레임워크에 많은 기능이 있다고 누가 생각이나 했을까요?!).

그들이 할 수 있는 일에 대한 아이디어를 얻고 자신만의 것을 만들도록 영감을 주는 몇 가지 제안 사항을 나열하고 싶습니다.

기본 사항

Application.registerActionOption 메소드를 사용하여 고유한 작업 옵션을 만들 수 있습니다. 그런 다음 메서드는 추가한 논리에 따라 true 또는 false를 반환합니다.

기본은 다음과 같습니다.

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

true를 반환하면 추가된 작업이 실행됩니다. 다음과 같이 사용됩니다: click->controller#action:fire.

이제 기본 사항은 명확해졌습니다. 사용 방법에 대한 몇 가지 예를 살펴보겠습니다.

언제밖에

일반적인 작업은 모달이나 드롭다운 등을 사용하여 요소 외부를 클릭하여 숨기는 것입니다. 논리는 다음과 같습니다.

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Stimulus 컨트롤러는 다음과 같습니다.

// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

그런 다음 HTML에서:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

data-dropdown-target="menu"를 사용하여 ul 외부를 클릭해야만 대상이 숨겨집니다. :stop 액션 옵션을 보셨나요? (당신이) 몰랐던 자극 기능에 대한 기사에서 살펴보았습니다.

조절됨

이제 dropdown_controller.js에 toggle 메소드가 있고 사용자가 어떤 이유로든 1000ms마다 이를 토글하기를 원한다고 가정합니다(판단 없음!).

const throttles = new WeakMap();

application.registerActionOption("throttled", ({ element }, { wait = 1000 } = {}) => {
  if (!throttless.has(element)) {
    throttles.set(element, 0);
  }

  const now = Date.now();
  const lastRun = throttles.get(element);

  if (now - lastRun >= wait) {
    throttles.set(element, now);

    return true;
  }

  return false;
});

1000ms마다 true를 반환합니다.

? 위크맵? 뭐야?! 책 작업 중이라 덜 무섭네요! Rails 개발자를 위한 JavaScript를 선주문하세요.

toggle 메소드를 사용하여 dropdown_controller.js를 확장해 보겠습니다.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  toggle() {
    this.menuTarget.toggleAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

다음과 같이 사용하세요.

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

액션 옵션을 쌓는 것이 어떻게 가능한지 알아보세요. 정지와 조절이 모두 사용됩니다.

WithMetakey

또 다른 예는 메타() 또는 ctrl 키를 누를 때만 드롭다운을 열려는 경우입니다

application.registerActionOption("withMetaKey", ({ event }) => {
  return event.metaKey;
});

HTML에서 다음과 같이 사용하세요.

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled:withMetaKey">Show</button>

  <ul hidden data-clicker-target="menu" data-action="click@window->dropdown#hide:whenOutside">
    <li>Menu Item</li>
  </ul>
</div>

드롭다운은 클릭 시 cmd/ctrl을 누를 때만 표시됩니다.

하나 더요? 하나 더!

With확인

드롭다운을 표시하기 전에 확인 대화상자를 표시하고 싶으신가요?

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

그리고 HTML에서:

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

그리고 이 모든 누적된 사용자 지정 작업이 작동합니다! 주어진 예에서는 실제로 사용되지는 않지만 이를 사용하여 수행할 수 있는 모든 작업을 보여줍니다.

아시다시피 저는 액션을 읽을 때 이해하기 쉽도록 맞춤 액션 옵션에 이름을 지정하는 것을 좋아합니다.

• click@window->dropdown#hide:whenOutside;
• 클릭->dropdown#show:withMetakey.

개인 취향. 물론 원하는 대로 이름을 지정할 수 있습니다.

이러한 많은 예의 경우 일반적으로 별도의 작업을 만들어야 하지만 사용자 정의 작업 옵션은 필요하지 않습니다. 일단 사용되는 모습을 보면 이에 대한 다양한 사용 사례를 발견하게 될 것입니다.

? 나는 이러한 사용자 정의 작업 옵션을 Stimulus-fx라는 작고 깔끔한 패키지에 수집했습니다. 꼭 확인해 보세요! 유용하다고 생각하시면 기여해 주세요!

위 내용은 고급 자극: 사용자 정의 작업 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!