0
내가 무엇을하려하는지 :Ember.js를 사용하여 키보드 이벤트를 처리하는 일반적인 패턴은 무엇입니까?
브라우저에 div 배열이 있다고 가정하면 사용자 요청에 따라 div가 인스턴스화되거나 삭제됩니다. 왼쪽 또는 오른쪽 화살표 키를 누르면 div가 왼쪽이나 오른쪽으로 이동해야합니다.
내 전류 (잘못 조작) 솔루션 :
이벤트 처리 및 위임 :
function onDocumentKeyDown(event){
switch (event.keyCode){
case 37: App.objectsView.scrollLeft(); break;
case 39: App.objectsView.scrollRight(); break;
}
}
// add event listener to document
function addEventListeners() {
document.addEventListener('keydown', onDocumentKeyDown, false);
}
addEventListeners();
응용 프로그램 컨테이너보기 :
App.objectsView = Ember.ContainerView.create({
childViews: [],
// CRUD stuff
createView: function(){ ... },
deleteView: function(){ ... },
updateView: function(){ ... },
// navigation stuff
scrollRight: function(){
this.scroll('right')
},
scrollLeft: function(){
this.scroll('left')
},
scroll: function(direction){
this.get('childViews').forEach(function(key){
var object = key;
object.move(direction);
}, this)
},
});
응용 프로그램 뷰 클래스 (완전성에 대해, 정말 관련이없는) :
App.ObjectView = Ember.View.extend(Animation, {
...
move: function(param){ ... }
});
* DOM 선택 및 변경 CSS 속성 로직의 대부분은 애니메이션 믹스 인을 통해 뷰로 가져옵니다.
당신이 볼 수있는 것처럼, 난 정말이 구현을 좋아하지 않는 이유는
각 키 이벤트는 내가 한 일을 키 (37)를 원하는 경우 어떤 컨테이너보기에서 특정 기능에 결합되어어떤 상황에서는 다른 상황에서 (예를 들어, 마우스 화살표가있는 경우)?
onDocumentKeyDown 함수가 문서에 추가되었는데, 그 이유를 정확하게 말할 수는 없지만 그게 나에게 불쾌 해 보인다.
ObjectsView는 인스턴스 과 이벤트 위임을 관리하는 논리를 모두 가지고 있습니다. 엠버의 containerView는 탐색 로직을 전혀 처리하지 않아도됩니까? (나는 그것들을 두 개의 다른 기능으로 분리 할 수있다. 그러나 이벤트가 같은 방식으로 처리된다면, 그것들은 도덕적으로 동등한 해결책으로 보인다).
감사합니다.