Knockout 3.2 applyBindings to new dom node - dom

Question

I have searched, and found old answers to this, and hacks about manually clearing bidnigns, and then calling applybindings... as well as creating a custom viewmodel that isnt directly related to anythign else and applying bindings with that AFTER the new dom nodes appear.
My specific scenario is that a bootstrap3 modal basically re-attaches itself after show is called, and likewise none of the items in the modal actually still bound.
I already have a model that represents state/properties of the dialog, but I'd like the dialogviewmodel to be a child of my pageViewModel.
My question is, at this point in time, whats the most appropriate way to do this? Is there no way to say take this node, attach it to the viewmodel at this property?

Answer 1

I am using the same tools as you (knockout and bootstrap3). This is how I accomplish Modals as an example:
This div exists as the first element of the body in my index.html:
<div class="modal fade" id="BaseModal" tabindex="-1" role="dialog" aria-labelledby="BaseModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div id="modalLoading" class="ajax-loader">
<img src="images/working_blue.gif" />
</div>
<div class="modal-dialog modal-lg">
<div id="ModalAnchor" class="modal-content col-lg-4 col-lg-offset-4" data-bind="html: $data.ModalContent"></div>
</div>
</div>
// This is typescript but the javascript should be pretty close to this.
private LoadModalView(viewName: string, viewModel: any): void {
$.get(viewName)
.then((view: any, status: string, jxhr: JQueryXHR) => {
this.ModalContent(''); // ensure there is no content in the modal.
this.ModalContent(view); // Load new HTML
ko.applyBindingsToDescendants(viewModel, this.ModalAnchor[0]); // bind new modal viewmodel
this.BaseModal.modal('show'); // Open the modal
}, (view: any, status: string, jxhr: JQueryXHR) => { /*Do error handling*/ });
}
EDIT: Here is an example of the HTML I load into the modal:
<div class="modal-header">
<h3 data-bind="text: $data.Header"></h3>
</div>
<div class="modal-body">
<h5 data-bind="text: $data.Message"></h5>
</div>
<div class="modal-footer">
<button id="OK" class="btn btn-primary center-block" data-bind="click: OK, text: ButtonText" />
</div>
In the LoadModalView function, the ViewModel parameter is a viewmodel to represent the new data/content/etc of the new modal.
In the Modal Viewmodel, I call 'hide' on the modal when it's purpose is served.
I hope this helps! I don't know if it's the 'correct' or 'proper' way to do this, but this is my pattern.