jQuery가 기존 앱의 requirejs로 재정의했습니다

지금있는 Flash 앱을 대체 할 기존 페이지의 작은 앱을 개발하는 작업이 할당되었습니다.jQuery가 기존 앱의 requirejs로 재정의했습니다

requirejs, knockout 및 jquery를 사용하여이 앱을 개발했지만 설치 프로그램을 사용할 때 앱의 일부 텍스트 영역에 등록 된 모든 변경 이벤트가 등록 취소 된 것처럼 보입니다. 동작은이 간단한 html 파일로 설명 될 수있다 :

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function() { 
      $("#container .input").change(function() { 
       console.log($(this).val()); 
      }); 
      console.log($("#input").data("events")); 
     }); 
    </script> 
    <script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script> 
    <script> 
     require.config({ 
      paths: { 
       jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min", 
      }, 
      shim: { 
       jquery: { 
        exports: "$" 
       } 
      } 
     }); 

     require(
      ["jquery"], 
      function($) { 
       console.log("starting"); 
       console.log($("#input").data("events")); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <input type="text" id="input" class="input" /> 
    </div> 
</body>

이 코드는 첫 번째 호출에 입력 요소에 부착 된 이벤트를보고하지만, 두 번째에 정의되지 않은 것입니다. 내가 업데이트 한 (숨겨진) 입력 필드의 내용을 자동 저장하는 일부 레거시 코드가 있기 때문에 첨부 된 이벤트가 필요합니다.

여기 무슨 일입니까?

출처

2013-06-17 Hauge

먼저 코드에 오류가있을 수 있습니다. 선택자 "#container .input"은 클래스 input을 참조하고 다른 코드는 #input, 즉 input을 나타냅니다.

The following jsfiddle example은 의도 한대로 작동합니다.

이 예제에서는 RequireJS를 사용하여 jQuery를 전혀로드하지 않습니다. 대신, <script> 태그로 jQuery를로드 한 후에 의 jquery 모듈을 명시 적으로로드하십시오.

이렇게하면 전역 jQuery 객체와 AMD jquery 모듈 값이 동일한 것입니다. 따라서 등

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script> 
<script>define("jquery", function() { return jQuery; });</script> 
<script> 
$(document).ready(function() { 
    console.log("page onready"); 
    var inputs = $("#container .input"); 
    console.log(inputs.length); 
    inputs.keypress(function() { 
     console.log($(this).val()); 
    }); 
    console.log($(".input").data("events")); 
}); 
</script> 
<script> 
require(["jquery"], function($) { 
    console.log("module starting"); 
    $(function() { 
     console.log("module onready"); 
     console.log($(".input").data("events")); 
    }); 
}); 
</script> 
<div id="container"><input class="input" type="text" /></div>

와 이벤트를 등록 할 수있는 단일 jQuery를 유지하는이 예제는 당신에 근접하기위한 것입니다 명심하십시오. 그것이 나라면 jQuery <script> 태그를 제거하고 RequireJS shim을 사용하여 jQuery를 가져 왔습니다.

이렇게 할 수 있는지 여부는 나머지 응용 프로그램에 따라 다릅니다.

하는

당신은 '벌거 벗은'$ 또는 jQuery 개체를 사용할 수없는 경우 (RequireJS 그것을로드 적어도까지 -이 경우 당신은 AMD의 구문을 사용한다, 다음 참조).
jQuery의 모든 사용은 require 또는 define 호출로 제한되어야합니다.
jQuery <script> 태그가 제거되었습니다 (jQuery 로딩을 두 번, <script> 태그로 한 번, RequireJS shim으로 한 번씩).

예컨대 :

<script src="http://requirejs.org/docs/release/2.1.6/comments/require.js"></script> 
<script> 
require.config({ 
    paths: { 
     jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min", 
    }, 
    shim: { 
     jquery: { 
      exports: "$" 
     } 
    } 
}); 
</script> 
<script> 
require(["jquery"], function($) { 
    $(function() { 
     console.log("page onready"); 
     var inputs = $("#container .input"); 
     console.log(inputs.length); 
     inputs.keypress(function() { 
      console.log($(this).val()); 
     }); 
     console.log($(".input").data("events")); 
    }); 
}); 
</script> 
<script> 
require(["jquery"], function($) { 
    console.log("module starting"); 
    $(function() { 
     console.log("module onready"); 
     console.log($(".input").data("events")); 
    }); 
}); 
</script> 
<div id="container"><input class="input" type="text" /></div>

출처

2013-06-18 11:35:38

니스 정교한 대답. 내가 좋아했던만큼 다른 스크립트를 제어 할 수 없었기 때문에 두 번째 접근법을 사용할 수 없었다. 내 모듈에서 jquery _at all_를 참조하지 않고 종료되었습니다. 나는 당신의 최고 해결책이 더 표현 적이기 때문에 더 낫다고 생각한다. – Hauge

jQuery가 기존 앱의 requirejs로 재정의했습니다

답변

관련 문제