Enquire.js -로드시 일치하지 않는 이벤트

Question

이 부분은 fiddle을 참조하십시오.

enquire.register("screen and (max-width: 640px)", { 
    match: function() { 
     $("body").css("background","red"); 
    }, 
    unmatch: function() { 
     $("body").css("background","blue"); 
    } 
}); 

브라우저 창은 다음 배경 색이 빨간색으로 설정됩니다 부하에 640 이하 입니다. (즉, 경기 이벤트가 호출 됨). 그러나 창이로드시 640px보다 넓은 경우 아무 일도 일어나지 않습니다. 즉 일치하지 않는 이벤트가 호출되지 않습니다. 왜 안돼? 조건과 일치하지 않는 경우 일치하지 않는 이벤트가 강제로 실행되도록하는 방법이 있습니까?

기본적으로 내가 원하는 것은 if-else 문이 즉시 호출된다는 것입니다.

Answer 1

내가 enquire.js를 디자인했을 때 모바일 용 RWD와 함께 사용하도록되어있었습니다. 따라서 진보적 인 개선 접근법을 취하고 있다고 가정합니다. 즉, 쿼리가 일치 할 때 match가 호출되고 이미 한 번 일치가 발생하고 쿼리가 더 이상 일치하지 않는 경우에만 unmatch가 호출됩니다. 이것은 이상하게 보일 수 있지만 일반적인 사용 사례는 "이 쿼리가 일치 할 때 뭔가를 수행하고 더 이상 일치하지 않을 때 실행 취소합니다"입니다. 예는 큰 화면에 탭 영역에 요소를 변환하고, 그렇지 않으면 스택 요소에 반환 될 수 있습니다 쿼리가 일치하지 않는 경우

UNMATCH가 처음 호출 된 경우

enquire.register(desktopMediaQuery, { 
    match : function() { 
    makeTabs(someElement); 
    }, 
    unmatch : function() { 
    makeStacked(someElement); 
    } 
}; 

는, 다음 넣어야 할 것 match가 이미 발생했는지 (또는 악화되었지만, makeStacked에 그런 논리가 있는지) 확인하기 위해 일치하지 않는 콜백의 논리. 우리는 엄격하게 예에서, 점진적 개선을 따라한다면

은, 난 그냥 CSS에서 기본적으로 파란색 배경을 가지고 있고, 경기에 클래스를 추가하고 UNMATCH에서 클래스를 제거하는 것입니다 :

enquire.register("screen and (max-width: 640px)", { 
    match: function() { 
     $("body").addClass("red-bg"); 
    }, 
    unmatch: function() { 
     $("body").removeClass("red-bg"); 
    } 
}); 

귀하의 예가 실제로 원하는 것의 단순화 된 버전이라고 가정합니다. 이 더 나은 정장 당신이해야 할 일을하는 경우 또한, 두 개의 미디어 쿼리를 사용할 수

enquire.register("(max-width: 640px)", { 
    setup : function() { 
     $("body").css("background","blue"); 
    }, 
    match : function() { 
     $("body").css("background","red"); 
    }, 
    unmatch : function() { 
     $("body").css("background","blue"); 
    } 
}); 

: 그래서 다른 방법은 기본 케이스를 충당하기 위해 설정 콜백을 사용하는 것입니다. 위와 같이 설치 프로그램을 사용하는 것보다 더 나은 의도라고 생각합니다.

enquire.register("(max-width: 640px)", { 
    match : function() { 
     $("body").css("background","red"); 
    } 
}) 
.register("(min-width: 641px)", { 
    match : function() { 
     $("body").css("background","blue"); 
    } 
}); 

여기 두 접근 보여주는 바이올린의 (미디어 쿼리가 검출되지 않고) http://jsfiddle.net/7Pd3m/가

Answer 2

문의 JS은 설치 번 트리거되는 레지스터 기능의 내부 호출하는 방법을 제공하며이 때 레지스터 핸들러 호출됩니다. 그래서 당신은 이런 식으로 포함하도록 코드를 확장 할 수

enquire.register("screen and (max-width: 640px)", { 
    setup: function() { 
    // do stuff here as soon as register is called. 
    }, 
    match: function() { 
     $("body").css("background","red"); 
    }, 
    unmatch: function() { 
     $("body").css("background","blue"); 
    } 
}); 

은