如何在不同位置重用剑道 ui 弹出窗口

Question

我想在多个地方使用相同的剑道 ui 弹出窗口。我首先尝试在运行时更改锚元素，这要么是不允许的，要么是我做错了。假设它是不允许的（这是有道理的），我的下一个尝试是在需要时创建窗口然后销毁它，然后稍后在不同的地方重新创建它。但是当调用 destroy 方法时，小部件会从 DOM 中完全删除，因此尝试重新创建它会失败。

虽然我知道我要求的不仅仅是弹出窗口的设计目的，有没有办法在不同的位置重复使用弹出窗口？

我的蛮力解决方案是有 n 个相同的弹出窗口......呃。

尝试 1：

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
...
//not sure if this is possible or how to do it
$("#popup").data("kendoPopup").anchor("#tc2");

尝试2：

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
$("#popup").data("kendoPopup").destroy();
...
//this fails
$("#popup").kendoPopup({
    anchor: $("#tc2")
});

Answer 1

在与 Kendo UI 打交道的这些年里，我学到的一个很好的教训是：尽可能地包装所有东西。因此，我建议您始终创建自己的包装函数或小部件。

这是一个简单的示例，说明如何使用包装函数实现您想要的：

var showPopup = function($popupEl, $anchorEl) {
    var popupOptions = {
        anchor: $anchorEl,
        origin: "bottom right",
        position: "bottom right",
        collision: "fit"
    };

    if (!$popupEl.hasClass("k-popup")) {
        $popupEl.kendoPopup(popupOptions);
    } else {
        $popupEl.data("kendoPopup").setOptions(popupOptions);
    }

    $popupEl.data("kendoPopup").open();
};

使用该函数，您可以随时随地调用它：

showPopup($("#popup"), $("#tc1"));

Demo