使用 jQuery-ui 对话框的 Knockout 组件忽略绑定

Posted 2023-03-27

【中文标题】使用 jQuery-ui 对话框的 Knockout 组件忽略绑定

【英文标题】：Knockout component using jQuery-ui dialog ignores bindings

【发布时间】：2018-05-05 19:37:34

【问题描述】：

我正在使用淘汰组件来模块化我的 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 绑定并使用非ko click 事件处理。只需将以下内容添加到构造函数中：

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

感谢您的宝贵时间！

【问题讨论】：

目前正在尝试gvas.github.io/knockout-jqueryui，这似乎解决了问题（至少在在线演示中）但没有成功。它没有说在 jQuery.ui.core 中无法读取未定义的属性“核心”。叹息！

【参考方案1】：

我相信你的问题是你在组件实例化完成之前调用$("#trashcan-dlg").dialog(...)。 如果您将那部分代码更改为：

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

setTimeout(...) 会将 $("#trashcan-dlg").dialog(...) 调用放在 JS 事件循环的末尾，以便在 ko 基础设施完成 DOM 操作时执行.

【讨论】：

谢谢！这解决了问题。我所做的唯一非必要修改是将setTimeout() 更改为ko.tasks.schedule()