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

The page that I'm working with has a couple tabs and the content of each tab is loaded in via ajax by requesting a partial view from the controller. The problem is that the partial view uses knockoutjs, so it is bound to a view model. In this particular scenario, the page is loaded up in its entirety first time through, so all of the bindings work fine. When you switch tabs, it requests a partial view and replaces the tab content area with the new page. When you switch back to the first tab, it'll successfully loads the partial, except it would appear that all of the knockout bindings have been lost so there is a lot of missing data.

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

I can't place the viewmodel declaration and model bind in the partial because jquery hasn't been loaded by that point. Or so it would seem ($ is not defined).

我无法将viewmodel声明和model bind放在分部中，因为jquery还没有被加载。或者看起来是这样($没有定义)。

The view model is declared and bound on the main page that calls the partial view(s), not the partial view itself, so I thought the model would still be available and bind successfully, but it does not. I know I'm doing this wrong, and partial view are super wonky when it comes to javscript so I'm hoping to steal a bit of insight from you guys.

视图模型被声明并绑定在调用部分视图的主页上，而不是部分视图本身，因此我认为模型仍然可用并成功绑定，但它没有。我知道我做错了，部分视图在涉及到javscript时是非常不稳定的，所以我希望能从你们那里学到一些东西。

Here's the basic setup: 当页面通过ajax作为部分加载时，我如何重新绑定knockout viewmodel ?

基本设置:

1 个解决方案

#1

If you are able to bind to specific non-overlapping areas of the page, then you could choose to call ko.applyBindings(someViewModel, someDomElement) like in this answer: Can you call ko.applyBindings to bind a partial view?

如果您能够绑定到页面的特定非重叠区域，那么您可以选择调用ko。在这个回答中，applyBindings(someViewModel, someDomElement):可以调用ko吗?绑定部分视图?

However, if you have an overall view model bound to the page and then "islands" of content that are loaded via a partial that you want to bind later, then one option would be to go for something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html. So, you would set up a binding on the container of where your partial goes that tells Knockout to keep its hands off of that area. Then when you load the partial, you can safely call ko.applyBindings(someViewModel, innerContainer).

但是，如果您有一个绑定到页面的全局视图模型，然后通过一个您想要绑定的部分来加载内容的“islands”，那么您可以选择这样的方式:http://www.knockmeout.net/2012/05/quick- skip-binding.html。所以，你要在你的部分去哪里的容器上设置一个约束告诉Knockout不要碰那个区域。当你装载部分时，你可以安全地调用ko。applyBindings(someViewModel innerContainer)。

The binding might look like:

绑定看起来可能是:

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

and you would use it like:

你可以这样使用:

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

Then, ko.applyBindings(someViewModel, document.getElementById("innerContainer"));

然后,ko。applyBindings(someViewModel . getelementbyid(innerContainer "));

#1