jQuery-UI 대화 상자를 사용하는 녹아웃 구성 요소가 바인딩을 무시합니다.

Question

녹아웃 구성 요소를 사용하여 UI를 모듈화하고 있습니다. 그 중 하나는 몇 개의 버튼이 포함 된 jQuery-Ui 대화 상자를 인스턴스화합니다. 대화 상자에 포함 된 모든 데이터 바인딩은 무시됩니다. 예, 녹아웃과 jQuery의 혼합에 대한 경고를 읽었지만 어떤 대안이 있습니까? 글쎄,이 간단한 경우에는 해결 방법이 있습니다. 계속 읽으세요.

내 구성 요소는 test.html

<div id="trashcan-dlg"> 
    <button data-bind="click: trashcanRecoverAll">Recover all</button> 
</div> 

및 test.js

"use strict"; 

define(["jquery", "jquery-ui"], function($) { 

    function TrashcanWidgetViewModel(params) { 

     $("#trashcan-dlg") 
      .dialog({ 
       resizable: false, 
       height: "auto", 
       width: "auto", 
       modal: false, 
       title: "Trashcan management" 
      }); 
    } 

    TrashcanWidgetViewModel.prototype.trashcanRecoverAll = function() { 
     console.log("trashcanRecoverAll"); 
    }; 

    return TrashcanWidgetViewModel; 
}); 

로 분할에 등록 :

ko.components.register("test", { 
    viewModel: {require: "widgets/test"}, 
    template: {require: "text!widgets/test.html"} 
}); 

내가 대화에 대한 사용자 지정 바인딩을 정의 할 경우 문제는 변경되지 않습니다 . 오류가 없으며 아무것도 없습니다. jQuery-ui 대화 상자가 DOM을 다시 작성하면 의미가 있습니다. 결과 DOM에 data-bind 지시어가 없습니다. 아니면 뭔가 분명하지 않습니까?

이 간단한 경우 해결 방법은 click 바인딩을 없애고 non-ko 클릭 이벤트 처리를 사용하는 것입니다. 생성자에 다음을 추가하기 만하면됩니다.

this.toolbarTrashcan = function() { 
    console.log("trashcanPurgeSelected"); 
}; 
$("button", "#trashcan-dlg").on("click", this.toolbarTrashcan); 

감사합니다.

Answer 1

구성 요소 인스턴스화가 완료되기 전에이 호출을 $("#trashcan-dlg").dialog(...)으로 호출하는 것이 문제라고 생각합니다. 귀하가 click 당신이 코드의 일부를 변경하는 경우 woring 시작해야 바인딩 :. 둘 것

setTimeout(function() { 
    $("#trashcan-dlg") 
     .dialog({ 
      resizable: false, 
      height: "auto", 
      width: "auto", 
      modal: false, 
      title: "Trashcan management" 
     }); 
}, 0); 

에서는 setTimeout (...) $ ("# 휴지통-DLG") 대화 상자 (...)를에 전화 JS 이벤트 루프의 끝이므로 ko 인프라가 DOM 조작으로 완료되면 실행됩니다.