knockout.js - Knockout 3.2 applyBindings to new dom node -


i have searched, , found old answers this, , hacks manually clearing bidnigns, , calling applybindings... creating custom viewmodel isnt directly related anythign else , applying bindings after new dom nodes appear.

my specific scenario bootstrap3 modal re-attaches after show called, , likewise none of items in modal still bound.

i have model represents state/properties of dialog, i'd dialogviewmodel child of pageviewmodel.

my question is, @ point in time, whats appropriate way this? there no way take node, attach viewmodel @ property?

i using same tools (knockout , bootstrap3). how accomplish modals example:

this div exists first element of body in 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>  // typescript javascript should pretty close this. private loadmodalview(viewname: string, viewmodel: any): void {     $.get(viewname)         .then((view: any, status: string, jxhr: jqueryxhr) => {             this.modalcontent(''); // ensure there no content in modal.             this.modalcontent(view); // load new html             ko.applybindingstodescendants(viewmodel, this.modalanchor[0]); // bind new modal viewmodel             this.basemodal.modal('show'); // open modal         }, (view: any, status: string, jxhr: jqueryxhr) => { /*do error handling*/ }); } 

edit: here example of html load 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 loadmodalview function, viewmodel parameter viewmodel represent new data/content/etc of new modal.

in modal viewmodel, call 'hide' on modal when it's purpose served.

i hope helps! don't know if it's 'correct' or 'proper' way this, pattern.


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -