Компоненты нокаута - не удается применить привязки более одного раза

Question

Я пытаюсь создать страницу с использованием компонентов нокаута, и у меня возникли проблемы с попыткой связать несколько компонентов на странице, если они не добавлены одновременно. Насколько я вижу, у меня нет способа прямого доступа к viewmodel компонента, чтобы привязать его к определенному элементу.

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 

Answer 1

кажется для меня, что вы, вероятно, пытаетесь добавить компонент, используя методы non-knockout.

Как только вы идете нокаутом, лучше держать все в нокаутном сгибе и сопротивляться искушению вернуться на jQuery или прямому манипулированию DOM для «быстрой победы». Он всегда кусает позже ... так:

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

Теперь мы «добавили» второй компонент путем изменения наблюдаемой в нашей корневой модели (someBooleanObservableThatChangesLater). Не требуется повторного связывания.

Ваши обстоятельства могут несколько отличаться от моего довольно простого примера выше, но, надеюсь, намерение ясно. Вы можете получить аналогичное поведение, нажав элементы на observableArray и используя привязку foreach, чтобы содержимое было добавлено/удалено из DOM, когда вы меняете observableArray. Еще раз, второй звонок на applyBindings не требуется.