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绑定并使用非ko点击事件处理。只需将以下内容添加到构造函数中：

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

谢谢你的时间！

Answer 1

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

，则click绑定应该开始起作用

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

setTimeout（...）会将$（“＃trashcan-dlg”）。dialog（...）调用到JS事件循环的结尾，以便在ko基础结构完成时执行DOM操作。

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

1 个答案: