如何强制淘汰赛重新绑定自定义绑定？

Question

我想知道如何强制淘汰绑定来刷新它的值。通常我们使用一个 observable，这样当 observable 改变时绑定可以自动发生。但就我而言，我创建了一个自定义绑定：

if (!ko.bindingHandlers.asyncHtml) {
ko.bindingHandlers.asyncHtml = {
    init: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var parameters = value.params.concat([function (data) {
            $(element).html(data);
        } ]);

        parameters.concat([function (data) {
            $(element).html('Unable to retrieve html.');
        } ]);
        value.source.apply(null, parameters);
    }
}
}

这样，执行异步 JSON 调用的函数可以在调用完成后更新相应的元素（使用返回的 HTML）。元素，在本例中为 DIV，如下所示：

<div id="myDiv" data-bind="asyncHtml: {source: getHtml, params: [myId()]}">

我的问题是，此页面上的另一个功能可以更改需要 myDiv 更新的数据库值。我可能可以找到一种复杂的方法来纠正这个问题，但我想知道是否有更简单的方法可以强制重新应用绑定？

注意：getHtml 是我的视图模型上的一个函数，它执行 JSON 调用以检索 HTML。

谢谢

Answer 1

我希望我能正确理解你想要完成的任务，但我不确定，所以让我解释一下我是如何理解你的目标的。

1. 您有一个 div (#myDiv)，它将从服务器检索它的初始 HTML。

2. 你有一个 ajax 函数 (getHtml) 来检索这个 html 并且 onSuccess 更新#myDiv，可能是这样的：

   $('#myDiv').html(serverResponseHTMLContent);

3. 然后你有另一个函数，它可能会产生不同的 HTML，应该代替服务器生成的 html。

如果这一切都正确，那么我建议你使用淘汰赛的 html 绑定。

你的 div 应该是这样的。

<div id="myDiv" data-bind="html: myDivInnerHtml">

myDivInnerHtml 将成为您的 viewModel 的一部分，并且应该像您通常所说的那样是可观察的。 在初始绑定之前，调用 getHtml 并让它设置 myDivInnerHtml 的值，而不是实际设置 myDiv 的 html。

myDivInnerHtml = ko.observable(serverHtmlString);

然后当您应用绑定时，myDiv 的内部 Html 将通过敲除设置。 要更新 html，您的客户端函数可以更改 myDivInnerHtml 的值。

myDivInnerHtml(clientSideFunctionHtmlString);

如果我的假设是错误的，并且您重新创建了具有不同值的相同 html，那么您应该尽可能使用模板，并且服务器不应该发送 html，而是要绑定到 html 的值。

另外，如果客户端函数不是创建 html，而是要绑定到 html 的值，那么这也不起作用。

Answer 2

您可以查看 valueHasMutated() 函数，它通知订阅者他们应该重新评估 observable。

更多解释请参见How to force a view refresh without having it trigger automatically from an observable?。