当页面通过ajax方式作为部分加载时，如何重新绑定knockout viewmodel？

10 浏览
0 Comments

当页面通过ajax方式作为部分加载时，如何重新绑定knockout viewmodel？

我正在处理的页面有几个选项卡，每个选项卡的内容是通过ajax请求从控制器加载的局部视图。问题是，这个局部视图使用了knockoutjs，因此它绑定了一个视图模型。在这种特定的情况下，页面首次完全加载，所以所有的绑定都正常工作。当你切换选项卡时，它会请求一个局部视图，并用新页面替换选项卡内容区域。当你切换回第一个选项卡时，它会成功加载局部视图，但似乎所有的knockout绑定都丢失了，所以有很多数据丢失。\n我不能在局部视图中放置viewmodel声明和模型绑定，因为在那个时候jquery还没有被加载。或者看起来是这样的（$未定义）。\n视图模型是在调用局部视图的主页面上声明和绑定的，而不是局部视图本身，所以我以为模型仍然可用并且可以成功绑定，但事实并非如此。我知道我做错了，当涉及到javascript时，局部视图非常棘手，所以我希望从你们那里得到一些见解。\n以下是基本设置的图示:\n\"enter

0

1 答案

0 Comments

问题的原因是，当页面作为ajax的局部加载时，需要重新绑定knockout的viewmodel。解决方法是，可以选择在页面的特定非重叠区域进行绑定，使用ko.applyBindings(someViewModel, someDomElement)来实现。但是，如果整个页面都绑定了一个总的viewmodel，并且通过局部加载的方式加载了一部分内容，希望在后面进行绑定，那么可以使用以下方法：首先，在局部内容的容器上设置一个绑定，告诉Knockout不要处理该区域。然后，在加载局部内容时，可以安全地调用ko.applyBindings(someViewModel, innerContainer)来实现局部绑定。具体实现如下：

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

然后在HTML中使用：

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

最后，调用ko.applyBindings(someViewModel, document.getElementById("innerContainer"));来进行绑定。

0