ExtJS의 HTML 앵커 태그에서 이벤트 처리

Question

큰 응용 프로그램이 ExtJS로 작성되었으며 응용 프로그램의 어느 곳에서나 사용자 정의 이벤트를 처리하는 가장 좋은 방법을 찾고 있습니다. 예를 들어, 앱의 일부 텍스트에 앵커 태그를 추가하여 앱에서 맞춤 구성 요소를 열려고 할 수 있습니다. 순간 나는 몸체에 대한 클릭을 듣고 대상에 특정 형식으로 CSS 클래스가 적용된 경우 액션을 수행하기 위해이 클래스를 사용합니다.

예를 들어 내가이있을 수 있습니다

<a class="ACTION-View-Customers">View Customers</a> 

내 이벤트 처리기가 떨어져 클래스 명을 끌어와 작업을 할 것입니다. 이 접근법의 문제점은 핸들러에 많은 매개 변수를 전달하는 것이 어렵다는 것입니다. 당신은

<a href="#" class="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a> 

이 접근 방식에 문제를 생각하고 대안을 제안 할 수 있습니다 : 내가 제안은과 같이, 앵커의 클래스 또는 HREF 태그 내부에 JSON을 사용하는 것입니다? 감사.

Answer 1

도움이 될 수 있다면 개인적으로 HTML 자체에 추가 메타를 사용하지 않을 것입니다. 특정 목적의 링크에 특정 ID를 적용하고 해당 개체에 클릭 이벤트를 바인딩합니다. 또한 작업하기에 흥미로운 DomQuery 객체 (앵커를 찾고 참조해야 함)를 발견했습니다. 필자는 보통 Ext JS와 함께 JQuery 어댑터를 사용하기 때문에 함수 자체에 Ext를 사용하면서 JQuery의 선택기를 사용하여 특정 DOM 요소와 JQuery의 바인드 함수 [.click (fn)]를 찾습니다. JQuery와 Ext JS는 특히 새로운 JQuery 1.3.1과 함께 훌륭한 콤보를 만든다.

Answer 2

HTML5의 data- attributes을 사용하는 것이 좋습니다. 예를 들어 :

<a href="#" data-event="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a> 

var eventsource = link.getAttribute("data-event"); 

HTH

Answer 3

당신이 알고있을 때, HTML 태그는 명명 된 속성을 받아들입니다. 그래서 당신은 특별히 속성이라고 불리는 것을 만들 수 있고 어떤 값을 그들에게 넘겨 줄 수 있습니다 (fx. my-bogus-param="something"). 이것으로 당신은 정교한 매개 변수 전달 시스템을 개발할 수 있습니다. 그런 다음 이벤트 핸들러에서 이러한 속성을 구문 분석 할 수 있습니다.