敲除组件 - 无法多次应用绑定

问题描述：

我正在尝试使用淘汰组件创建页面，并且在尝试绑定页面中的多个组件时遇到一些问题，如果它们未在同一时间添加。据我所见，我没有办法直接访问组件的视图模型，将它绑定到特定的元素。敲除组件 - 无法多次应用绑定

ko.applyBindings(viewModel, document.getElementById("component1"));

我的问题是，因为我这样有，如果我在以后添加其他组件到页面，并想将它绑定使用更普遍

ko.applyBindings()

，我收到“你不能将绑定多次应用于同一个元素。”错误。

有什么方法可以让我访问组件视图模型并直接应用它？

$('body').append('<div id="compoent1" data-bind=\'component: { name:"someComponent"\}'></div>') 
ko.applyBindings(viewModel/*How do I get this?*/, document.getElementById("component1"));

我刚刚使用

ko.applyBindings(document.getElementById("component1"));

我的解释或许有些难以理解试过了，这里是什么，我试图做的伪代码：

Add a knockout component 
Apply bindings for the knockout component 
.... some time later in my single page application 
Add another knockout component 
Apply bindings for the new knockout component

“如果稍后再向页面添加另一个组件”如何添加组件？以非基础的方式（即使用jquery或类似的方式）？ – spender

你正在尝试使用_same_视图模型？如果它在你的代码中，你可以引用它 - 尽管这是一种用KO获得视图模型的方法，但它会很愚蠢。即'ko.dataFor'。 –

这里最好的办法是创建一个[MCVE]（/ help/mcve），现在很难分辨出你在做什么，因此，我们可以帮你完成工作。 –

答

似乎对我来说你可能试图使用非淘汰方法添加一个组件。

一旦你去淘汰赛，最好把所有东西都放在淘汰赛中，并抵制掉回jQuery或者直接DOM操作来获得“快速获胜”的诱惑。它总是咬你以后......这样：

<foocomponent params="woo:'fwoo'"></foocomponent > 
<!-- ko if:someBooleanObservableThatChangesLater --> 
    <myawesomecomponent params="choo:'boo'"></myawesomecomponent > 
<!-- /ko -->

现在，我们已经在我们的根模型（someBooleanObservableThatChangesLater）改变观察的“补充”的第二组分。不需要重新绑定。

你的情况可能与我上面的简单例子有所不同，但希望其意图是清楚的。您可以通过将项目推入observableArray并使用foreach绑定来获得类似行为，以便每当更改observableArray时都会将内容添加到DOM中或从DOM中移除内容。再次，不需要拨打applyBindings的第二个电话。

有道理！我刚刚开始淘汰赛，所以我仍然非常喜欢jQuery的想法。我会尝试使用一些布尔值来添加东西。然而，在SPA中有多个“子站点”，我认为一个巨大的视图模型会变得非常混乱。 – Robin

是的。我被这个问题困住了......但是，通过定义类/工厂来封装视图模型的大部分内容，可以很容易地通过在视图模型中分离责任来减少混乱。 – spender

敲除组件 - 无法多次应用绑定

相关推荐