2012-02-13 75 views
17

采用淘汰赛,当你调用ko.applyBinding(viewModel, "divId")它的递归通过你势必(“DIVID”)元素的孩子结合了下来。我想在一个子节点停止这个评估。有没有办法做到这一点?如何停止knockout.js绑定评估的子元素

为什么...

我想整个页面绑定到导航视图模型的原因,这将处理基本的布局和... ...微笑导航。在各种页面上,我想将某些区域绑定到不属于导航视图模型属性的不同视图模型。目前,如果我这样做,我得到“无法解析绑定”的错误,因为导航视图模型没有所需的属性。如果我能阻止绑定走下来,我可以分别绑定这些项目。我这样做

回答

35

有几种方法,你可以去在这一个。通常,您可以将多个“子”视图模型添加到主视图模型,然后使用实际视图模型的各个区域上的绑定来绑定它们。

有可能在技术上你所追求的。您可以创建一个自定义绑定,告诉KO它将处理绑定儿童本身。它看起来像:

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

当你把它放在一个元素上,然后KO会忽略孩子。然后,您可以使用不同的视图模型对此元素的子元素调用ko.applyBindings。

样品:http://jsfiddle.net/rniemeyer/tWJxh/

通常,虽然,你会使用with绑定使用一个主视图模式下的多个视图模型。

+1

优秀的东西,正是我想要的。我的情况可能不典型,但它给了我一个真正的模块基于负载的方法,其中每个模块独立于所有其他的,使得测试的乐趣... – 2012-02-13 06:13:55

+0

这迫使使用额外的容器简单地停止绑定;让无容器(注释)节点支持自定义绑定处理程序(如上面的stopBindings)会很容易吗?这将在高度模块化的应用程序是有用的:) – AlexG 2012-04-24 18:27:48

+0

在2.1(在RC),容器较少的自定义绑定处理程序将有可能像:http://jsfiddle.net/rniemeyer/75yQD/。所以,这将是没有问题的。在2.0中,'ko.virtualElements.allowedBindings'没有公开。 – 2012-04-24 18:35:17

3

一种方法是创建用于导航部分(或只是一个)和navVM绑定到它。然后为内容创建另一节并将contentVM绑定到它。这样就没有冲突,而且它们都是非常分离的。

<body> 
    <div id="navSection"> 
    </div> 
    <div id="contentSection"> 
    </div> 
</body> 

然后做ko.applyBinding(navVM, “navSection”)和ko.applyBinding(contentVM, “contentSection”)

+0

嗯...很遗憾,创建两个单独的绑定上下文并不容易,这两个绑定上下文在同一个子树 – 2012-02-13 03:11:17

+1

中,你“可以”做到这一点(参见Ryan的注释),我只是说它可能更有条理地想到你的组件作为他们自己的松耦合模块。 – 2012-02-13 17:02:57