Question

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

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

问题是这有时会被多次调用，或者有时会忘记触发所需的事件并且会一遍又一遍地产生相同的错误因此业务决定将此机制移动到以下逻辑的自定义绑定：如果元素被绑定（变得可见或以某种其他方式在页面上结束）然后应用JQuery移动UI。自定义绑定的init相当于ko.applyBindings和update相当于ko.valueHasMutated。当列表出现时，它工作得很好。然而，当页面使用分页或过滤时，模型不会被重新绑定＆＃39;只更改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列表有什么，但它不是一个合适的解决方案，我们不妨留下我们以前的那个黑客。

ko.valueHasMutated如何通过正确的参数传递knockout.js自定义绑定update？

Answer 1

目前我正在使用这个解决方案，因为我知道有人会提出这个问题。但这只是一个黑客，我宁愿选择一个适当的＆＃39;来自某人的解决方案。

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

自定义绑定未激活更新

1 个答案: