다음과 같은 스칼라 태그 를 사용하여 재사용 가능한 구성 요소를 만들고 싶습니다.
<div class="container">
<button>Delete me</button>
<div class="actual-content">
...
</div>
</div>
클릭하면 onclick전체 div컨테이너 를 삭제하는 버튼에 리스너 를 등록하고 싶습니다 .
다음과 같이 할 수 있음을 알고 있습니다 (jQuery 사용).
div(id:="myid")(
button(onclick:={() => jQuery("#myid").remove()}(Delete me),
div(...)
)
하지만이 솔루션의 문제점은이 요소를 자동으로 생성하고 고유 ID를 생성해야하기 때문에 ID로 요소를 가져 오는 것이 번거 롭다는 것입니다.
더 좋은 방법이 있습니까? divdiv 내부에서 'myid'를 참조하는 방법이 있습니까?
감사
DOM 이벤트 콜백 (예 :에 전달하는 것 onClick := ???)은의 인스턴스를 Event첫 번째 매개 변수로받습니다. 해당 이벤트에는 이벤트가 트리거 된 (귀하의 경우에는 클릭되는 버튼) target을 포함 하는 속성이 있습니다 Node. 해당 노드에는 parentNode대상 요소의 부모 노드 (요소)를 참조 하는 속성이 있습니다. 귀하의 경우 버튼 parentNode은 제거하려는 노드 인 div입니다. 따라서 이러한 종류의 콜백을 제공하여 div를 제거 할 수 있습니다.
def clickHandler = (event: Event): Unit = {
val myDiv = event.target.parentNode
myDiv.parentNode.removeChild(myDiv)
}
그러나 이러한 스타일의 UI 프로그래밍은 매우 필수적이며 더 큰 코드베이스로 잘 확장되지 않는다는 것을 알아야합니다. 요즘에는 프론트 엔드 앱을 작성하는 더 좋은 방법이 있습니다. 예를 들어 Scala.js의 경우 DOM 상태를 관리하기위한 몇 가지 라이브러리가 있습니다.
더 있습니다. 이것들은 제가 지금 기억하는 것들입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다