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

Question

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

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

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

Когда вы идете в нокаут, лучше держать все в нокаут-фолде и не поддаваться искушению вернуться к jQuery или прямым манипуляциям с DOM для "быстрого выигрыша". Это всегда кусает тебя позже... так:

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

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

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