Knockoutjs 中的自定义组件绑定

Question

I am trying to load custom components using knockoutjs.

Here is my HTML :

<div id="mainDiv"></div>

JS:

$("#mainDiv").append("<my-component-name></my-component-name>");

This appends <my-component-name></my-component-name> after div but does not bind my component to html.

If I use ko.applyBindings(); it throws error "Error: You cannot apply bindings multiple times to the same element."

I am not able to find whats wrong with bindings.

Answer 1

The view is updated, but the bindings are not. You need to do ko.applyBindings on any elements inserted in the HTML after the bindings are applied the first time. It's a lousy solution to apply components after applying bindings. And DON'T mix knockout with jQuery or js DOM manipulation, PLEEEASSE!

Answer 2

Here I got the solution:

var myComp = document.createElement("my-component-name");
$("#mainDiv").append(myComp);
ko.applyBindings({},myComp);

Ko.applyBinding was needed to bind my component in html.