데이터 바인딩 (knockout.js)이있는 requirejs 모듈을로드 하시겠습니까?

Question

데이터 바인드 속성을 사용하여 js를로드하고 싶습니다. 나는 requirejs와 녹아웃에 상당히 새롭다. 그리고 나는 이것을 나가는 방법을 모르고있다.

지금 당장은 다른 구성 요소로 분리 된 js를 각 구성 요소 유형별로 필요로합니다.

define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){ 
    var $menu = $(".menu"); 
    var $dropdown = $menu.find("ul"); 
    $menu.on("click", function() { 
     $dropdown.toggle("fast"); 
    }); 
};  

내가하고 싶은 것은 : 예를 들어, 내가 헤더 드롭 다운 다루는 파일 (header.js)이

<div class="header" data-bind="headerDropdown">...</div> 

를 그리고 각각의 JS를로드합니다.

대부분의 js 모듈은 클릭 (표시 및 숨기기)에 기반한 UI 변경 사항이지만 js가로드하려면 HTML 블록이 페이지에 있어야합니다.

희망적으로 말이 되네요!

requirejs와 녹아웃을 사용하면 어떻게 할 수 있습니까?

Answer 1

개념을 혼합하는 것처럼 보입니다. 첫 번째의이 정의() 정의를 보자 (파일을 가정하는 것은 headerDropdown.js입니다) :

define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){ 
    var $menu = $(".menu"); 
    var $dropdown = $menu.find("ul"); 
    $menu.on("click", function() { 
     $dropdown.toggle("fast"); 
    }); 
};  

1. Require.js 자신의 이름 ('headerDropdown')를 expliciting 모듈을 정의하는 것을 권장하지 않습니다; 파일 이름을 기반으로 이름을 얻을 수 있습니다. 왜냐하면 require에는 제작 과정에서 javascript를 최적화하기위한 도구가 있기 때문입니다. 출력 JS를 연결하고 최소화 할 수 있습니다. 옵티마이 저는 파일 이름을 사용하여 모듈 이름을 정의합니다. 이름으로 정의하지 마십시오.

2. 코드를 보면 [jquery]가 필요하지만 모듈 정의 내에서 전역 jQuery 변수를 사용하고 있습니다. jQuery는 자신의 모듈을 전역 변수로 정의하기 때문에 괜찮습니다.하지만 jquery 참조를 함수로받는 것이 관례입니다 :

   define ('headerDropdown', [ 'jquery', 'bootstrap']), function ($, 부트 스트랩)

3. DOM을 직접 조작하는 모듈을 정의하고 있습니다.이 모듈은 녹아웃의 DOM 업데이트 절차를 거칩니다. 귀하의 경우에는 data-bing = "headerDropwodn"을 사용하므로 headerDropdown은 간단한 모듈이 아닌 bindingHandler입니다. 다음을 확인하십시오 : http://knockoutjs.com/documentation/custom-bindings.html

4. 당신이 질문 할 때 요구 사항을로드 할 수 있습니다. 코드를 변경하기 만하면됩니다.

   • HTML에 app.js 스크립트 (예 :)를로드하십시오. 이 app.js에는 녹아웃과 headerDropdown bindingHandler가 필요합니다. 함수 선언에서 ko.applyBindings를 정의하면됩니다.

인사말!