当页面通过ajax作为部分加载时，如何重新绑定淘汰视图模型？

Posted 2023-03-05

【中文标题】当页面通过ajax作为部分加载时，如何重新绑定淘汰视图模型？

【英文标题】：How do I rebind the knockout viewmodel when the page is loaded in as a partial via ajax?

【发布时间】：2014-02-10 04:04:55

【问题描述】：

我正在使用的页面有几个选项卡，每个选项卡的内容通过 ajax 加载，方法是从控制器请求部分视图。问题是局部视图使用了knockoutjs，所以绑定到一个视图模型。在这个特定的场景中，页面是第一次完整加载的，所以所有的绑定都可以正常工作。当您切换选项卡时，它会请求部分视图并将选项卡内容区域替换为新页面。当您切换回第一个选项卡时，它会成功加载部分，但似乎所有敲除绑定都已丢失，因此丢失了很多数据。

我无法将 viewmodel 声明和模型绑定放在部分中，因为此时尚未加载 jquery。或者看起来是这样（$ 没有定义）。

视图模型是在调用局部视图的主页上声明和绑定的，而不是局部视图本身，所以我认为模型仍然可用并成功绑定，但事实并非如此。我知道我做错了，当涉及到 javscript 时，部分观点非常不稳定，所以我希望从你们那里窃取一些见解。

这是基本设置：

【参考方案1】：

如果您能够绑定到页面的特定非重叠区域，那么您可以选择调用ko.applyBindings(someViewModel, someDomElement)，如以下答案：Can you call ko.applyBindings to bind a partial view?

但是，如果您有一个整体视图模型绑定到页面，然后通过部分加载的内容“孤岛”要稍后绑定，那么一种选择是这样：@987654322 @。因此，您将在您的部分所在的容器上设置一个绑定，告诉 Knockout 将其手从该区域移开。然后当你加载部分时，你可以安全地调用ko.applyBindings(someViewModel, innerContainer)。

绑定可能如下所示：

ko.bindingHandlers.stopBinding = 
    init: function() 
        return  controlsDescendantBindings: true ;
    
;

你会像这样使用它：

<div id="outerContainer" data-bind="stopBinding: true">
    <div id="innerContainer">
     ...load your partial here
    </div>
</div>

那么，ko.applyBindings(someViewModel, document.getElementById("innerContainer"));