使用jQueryUI对话框的淘汰组件忽略绑定

我正在使用淘汰组件来模块化我的UI。 其中一个实例是包含几个按钮的jQueryUI对话框。 它们以及对话框中包含的任何内容上的所有数据绑定都将被忽略。 是的，我已经阅读了这里关于混合使用knockout和jQuery的警告，但是我有哪些选择呢？ 在这个简单的例子中，我有一个解决办法。继续读

我的组件分为

test.html

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

注册地址：

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

如果为对话框定义自定义绑定，则问题不会改变。没有错误，什么都没有。如果jQueryUI对话框重写DOM，这是有意义的：结果DOM中没有

数据绑定

指令。或者我错过了一些明显的东西

在这种简单的情况下，解决方法是摆脱

click

绑定，并使用非ko-click事件处理。只需将以下内容添加到构造函数中：

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

---

谢谢你的时间

我认为您的问题在于，您在组件实例化完成之前调用了

$（“#垃圾桶dlg”）.dialog（…）

。 如果将

部分代码更改为：

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

setTimeout（…）将把$（“#垃圾桶dlg”）.dialog（…）调用放在JS事件循环的末尾，以便在
ko
基础结构完成DOM操作时执行该调用。
目前正在尝试解决问题（至少在在线演示中），但没有成功。在jQuery.ui.core中不能读取未定义的属性'core'，这句话失败了。唉！谢谢这就解决了问题。我所做的唯一非必要的修改是将
setTimeout（）
更改为
ko.tasks.schedule（）
setTimeout(function () {
    $("#trashcan-dlg")
        .dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: false,
            title: "Trashcan management"
        });
}, 0);