Knockout寄存器插入了具有其他功能的元素

Knockout register inserted element with other function

本文关键字：其他 功能 元素 寄存器 插入 Knockout      更新时间：2023-09-26

我使用Knockout来显示图像数组的一些标记。每个标签都将有一个弹出窗口，提供有关标签的更多信息。元素以以下方式注册到弹出类中：

function RegisterCharacterPopups() {
    $('[data-characterid]').each(function() {
        var cId = $(this).data('characterid');
        var placement = $(this).data('position');
        if (placement == null || placement == undefined) {
            placement = "top-center";
        }
        $(this).PopUp({
            url: "/Ajax/CharacterPop/" + cId,
            position: placement,
        });
    });
}

我已经将其添加到视图模型的构造函数中，该构造函数包含以下标签：

// Hook on to update of Tags
ko.computed(() => {
    var test = this.Tags();
    RegisterCharacterPopups();
    console.log("Tags updated");
});

我可以看到方法被执行了，但标签没有在弹出窗口中注册。如果它强制标签再次更新，它会工作吗！我认为问题是这个方法是第一次执行的，在元素进入html之前。我该如何解决这个问题，以便它在执行之前等待插入元素？

解决方案：自定义绑定

ko.bindingHandlers['tagpop'] = {
    init: function (element, valueAccessor, allBindings, vm, context) {
        var data = valueAccessor();
        $(element).PopUp({
            url: "/Ajax/CharacterPop/" + data.id,
            position: data.placement,
        });
    },
    update: function (element, valueAccessor) {
    }
};
相关文章：