首页 文章

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

提问于
浏览
5

我正在使用的页面有几个选项卡,每个选项卡的内容通过ajax从控制器请求部分视图加载 . 问题是局部视图使用knockoutjs,因此它被绑定到视图模型 . 在这个特定的场景中,页面首次完整地加载,因此所有绑定都可以正常工作 . 切换选项卡时,它会请求部分视图,并用新页面替换选项卡内容区域 . 当你切换回第一个标签时,它会成功加载部分,除非看起来所有的敲除绑定都已丢失,因此存在大量缺失数据 .

我无法将viewmodel声明和模型绑定放在partial中,因为该点尚未加载jquery . 或者似乎($未定义) .

视图模型在调用局部视图的主页面上声明和绑定,而不是部分视图本身,所以我认为模型仍然可用并且绑定成功,但事实并非如此 . 我知道我做错了,当谈到javscript时,部分视图是非常难以理解的,所以我希望能从你们那里窃取一些洞察力 .

这是基本设置:
enter image description here

1 回答

  • 7

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

    但是,如果您有一个绑定到页面的整体视图模型,然后是通过稍后要绑定的部分加载的内容"islands",那么一个选项可能是这样的:http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html . 所以,你要在容器上设置一个绑定,你的部分位置告诉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"));

相关问题