2013-12-12 2 views
0

foreach 및 템플릿 바인딩을 사용하여 div 요소 목록에 바인딩하는 observable 배열이 내 viewmodel에 있습니다. 키보드의 위/아래 화살표 키를 사용하여 div 요소를 탐색하는 방법은 무엇입니까?knockout을 사용한 키보드 탐색

내가 원하는 방식은 사용자가 포커스를 얻는 div 요소 중 하나를 클릭 할 때이며 아래쪽 화살표 키를 누르면 다음 div 요소가 포커스를 얻고 마찬가지로 위쪽 화살표 키를 누르면 이전 div가옵니다. 초점. 나는 인터넷 전체를 수색했지만 적절한 답을 찾지 못했습니다. 감사!!

답변

0

내가이 일을 상상 몇 가지 방법이 있습니다 ... 여기에서 ...

이 당신의 ViewModel에 'selectedObject'속성을주고 녹아웃을 통해 사업부 별 클릭 이벤트를 처리합니다. 이벤트가 트리거되면 전달 된 컨텍스트로 'selectedObject'를 설정할 수 있습니다. 이 click 이벤트에서 $ .toggle() jQuery를 통해 css 클래스를 만들고 새 div 요소의 아래쪽 화살표 이벤트에 대한 핸들러를 설정합니다. 기존 이벤트 핸들러를 지우고 새 이벤트 요소와 충돌하지 않도록합니다.

클릭 바인딩의 녹아웃에 : http://api.jquery.com/bind/

이 당신의 시도와 바이올린을 제공하고 내가 추적을하려고합니다 : http://knockoutjs.com/documentation/click-binding.html 이벤트 JQuery와에 바인딩.

0

이 위젯에 대한 "구성 요소/템플릿"의 최상단 컨테이너에서 바로 가기 키를 처리하는 것이 좋습니다. 이렇게하면 각 li이 단축키를 담당하는 대신 한 곳에서 위/아래를 처리 할 수 ​​있습니다.

또한 마우스 및 기본 탭 이벤트를 사용하여 요소를 선택하려면 "로빙 탭 인덱스"를 살펴보십시오.

녹아웃을위한 포커스 바인딩을 살펴 보는 것도 도움이됩니다.

편집 :이 유용한 라이브러리도 있습니다. https://github.com/bramstein/knockout.selection