javascript - knockout 寄存器插入元素与其他功能

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

我已将其添加到包含标签的 View 模型的构造函数中:

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

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

Answer 1

解决方案:自定义绑定(bind)

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