自定义绑定未触发更新

Posted 2023-05-09

【中文标题】自定义绑定未触发更新

【英文标题】：custom binding is not firing update

【发布时间】：2014-09-13 15:25:57

【问题描述】：

我正在使用使用 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。 当列表“出现”在页面上时，它工作得很好，但是当使用分页或过滤时，模型没有被“重新绑定”，只有 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 自定义绑定 update 触发并传递正确的参数？

【问题讨论】：

我无法完全理解您在做什么，也无法理解问题所在。您能否在小提琴中重现此问题，我们可能会帮助您查明问题或使其正常工作的方法？

@PWKad 这不是一个错误请求，UPDATE 中的代码可以正常工作，但它的完成方式是错误的。自定义绑定有init 和update 是有原因的，第一个用于初始绑定，另一个用于后续值更改（或者至少这是我理解的方式）。 UPDATE 中的代码是解决方法 - 我正在寻找适当的解决方案（这将在 valueHasMutated 上，例如模型更新将调用自定义绑定 update）。您似乎是淘汰赛专家，如果我在这里遗漏了什么，请告诉我。谢谢。

【参考方案1】：

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

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