javascript - 自定义绑定(bind)未触发更新

Question

我正在使用使用 Knockout.js 和 Jquery Mobile UI 组合的系统。我遇到的问题之一是将 Jquery Mobile 应用于具有 knockout :if 绑定(bind)的元素。我们使用的最初解决方案是在调用 ko.applyBindings 和 ko.valueHasMutated 时在页面循环触发事件中，然后在调用以下内容的事件处理程序中

$(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
$(element).collapsibleset().collapsibleset("refresh");

问题是有时会被多次调用，或者有时有人会忘记触发所需的事件并会一遍又一遍地产生相同的错误，因此业务决定将此机制转移到具有以下逻辑的自定义绑定(bind):如果元素已绑定(bind)(变得可见或以其他方式结束在页面上)，然后应用 JQuery 移动 UI。自定义绑定(bind)的 init 相当于 ko.applyBindings，update 相当于 ko.valueHasMutated。当列表“出现”在页面上时，它工作得很好，但是当使用分页或过滤时，模型没有被“重新绑定(bind)”，只有 viewModel 数组被更改，并且 ko.valueHasMutated 被调用。我刚刚发现，当值发生变化时，update 不会被调用。我已经阅读了一些内容，这似乎是一个已知问题，但似乎没有一个解决方案适合我的情况

ko.bindingHandlers.expandableListJQM = {
    init: function (element, valueAccessor) {
        $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
        $(element).collapsibleset().collapsibleset("refresh");
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val!= undefined) {
             valueAccessor().subscribe(function (element, valueAccessor) {
                $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
                $(element).collapsibleset().collapsibleset("refresh");
            });
        }
    },

    update: function (element, valueAccessor) {
        $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
        $(element).collapsibleset().collapsibleset("refresh");
    }
};

即使我订阅 valueAccessor() 就像示例 function (element, valueAccessor) {... 一样，它对我来说没有多大用处，因为变量是作为 element 传递的是空数组，没有什么用处。
我可以通过使用 JQuery 选择器开始应用 .collapsibleset().collapsibleset 因为我知道 ID 列表有什么，但它感觉不是一个合适的解决方案，我们不妨保留之前的 hack。

如何在 ko.valueHasMutated 上使 knockout.js 自定义绑定(bind) update 触发并传递正确的参数？

Answer 1

目前我正在使用这个解决方案，因为我知道有人会提出它。但这只是一个黑客，我更希望有人提供“正确”的解决方案。

ko.bindingHandlers.expandableListJQM = {
    init: function (element, valueAccessor) {
        $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
        $(element).collapsibleset().collapsibleset("refresh");
        var element =  $(element);
        var val = ko.utils.unwrapObservable(valueAccessor());
        if (val!= undefined) {
             valueAccessor().subscribe(function() {
                $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
                $(element).collapsibleset().collapsibleset("refresh");
            });
        }
    },

    update: function (element, valueAccessor) {
        $(element).find('div[data-onthemovecollapsible="true"]:not(div[data-role="collapsible"])').attr("data-role", "collapsible");
        $(element).collapsibleset().collapsibleset("refresh");
    }
};