javascript - Knockout 组件 - 不能多次应用绑定(bind)

Question

我正在尝试使用挖空组件创建一个页面，但在尝试绑定(bind)一个页面中的多个组件时遇到了一些麻烦，如果它们不是同时添加的话。据我所知，我无法直接访问组件的 View 模型，将其绑定(bind)到特定元素。

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

我的问题是，因为我必须使用更通用的

ko.applyBindings()

如果我稍后将另一个组件添加到页面并想要绑定(bind)它，我会收到“您不能将绑定(bind)多次应用到同一元素”。错误。

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

$('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

Answer 1

在我看来，您可能正在尝试使用非 knockout 方法添加组件。

一旦您进行 knockout ，最好将所有内容都保留在 knockout 中，并抵制为“快速获胜”而退回到 jQuery 或直接 DOM 操作的诱惑。它总是在以后咬你......所以:

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

现在我们通过更改根模型中的可观察对象“添加”了第二个组件 (someBooleanObservableThatChangesLater)。无需重新绑定(bind)。

您的情况可能与我上面相当简单的示例有些不同，但希望意图是明确的。您可以通过将项目插入 observableArray 并在其上使用 foreach 绑定(bind)来获得类似的行为，以便在您更改 时将内容添加到 DOM 或从 DOM 中删除可观察数组。再一次，不需要第二次调用 applyBindings。