Knockout 组件 - 不能多次应用绑定

Question

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

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

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

ko.applyBindings()

如果我稍后将另一个组件添加到页面并想要绑定它，我会收到 "You cannot apply bindings multiple times to the same element." 错误。

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

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

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

一旦你淘汰出局，最好把所有东西都留在淘汰赛中，并抵制掉回 jQuery 或直接 DOM 操纵 "quick win" 的诱惑。它总是在以后咬你......所以：

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

现在我们通过更改根模型 (someBooleanObservableThatChangesLater) 中的一个可观察对象得到了第二个组件 "added"。无需重新绑定。

您的情况可能与我上面这个相当简单的示例有些不同，但希望您的意图是明确的。您可以通过将项目推入 observableArray 并在其上使用 foreach 绑定来获得类似的行为，以便在您更改 [=12] 时从 DOM 添加内容 to/removed =].再一次，不需要第二次调用 applyBindings。

Knockout 组件 - 不能多次应用绑定

Knockout Components - Cannot apply bindings more than once

javascript

knockout.js

knockout-components