javascript - 具有其他功能的剔除寄存器插入元素

Question

我正在使用 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 之前第一次执行。我该如何解决这个问题，所以它会在执行之前等待元素被插入？

Answer 1

解决方案：自定义绑定

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) {
    }
};