jQuery-UIダイアログを使用したノックアウトコンポーネントはバインディングを無視します

Question

ノックアウトコンポーネントを使用してUIをモジュール化しています。 それらの1つは、いくつかのボタンを含む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バインディングを取り除き、非コクリックイベント処理を使用することです。コンストラクタに次のコードを追加してください：

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操作で完了したときに実行されます。