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
Post a Comment