KnockoutJS / Bootstrap – Effacement du formulaire modal lors de la fermeture de modal en utilisant javascript

J'ai un Bootstrap Modal qui contient un formulaire pour mettre à jour ou créer une entité (Company dans mon exemple). À l'heure actuelle, mon problème est que si je visualise une entité à l'aide de la modal, elle ne supprime pas les champs lorsque je ferme le mode d'origine par tous les moyens. Causant le formulaire pour être encore peuplé si je clique sur un bouton "Créer", qui devrait m'apporter un mode vierge.

Comment puis-je exécuter l'une de mes méthodes ViewModels à partir d'un javascript régulier? Voici mon code:

function ViewModel() { var self = this; function CompanyViewModel(company) { var self = this; self.Id = company.CompanyId; self.Name = company.Name; } function BlankCompanyViewModel() { var self = this; self.Id = 0; self.Name = ""; } self.company = ko.observable(); self.companies = ko.observableArray(); self.clearCurrentCompany = function() { self.company(new BlankCompanyViewModel()); }; // Initialize the view-model $.getJSON("/api/company", function(companies) { $.each(companies, function(index, company) { self.companies.push(new CompanyViewModel(company)); }); self.clearCurrentCompany(); }); }

Idéalement, j'aimerais exécuter ViewModel.clearCurrentCompany sur l'événement «Caché» du mode modal:

  $('#myModal').on('hidden', function() { //Do something here, not sure what });

 function ViewModel() { var self = this; // your previous code $('#myModal').on('hide', function() { self.clearCurrentCompany(); }); }

Juste comme ça. Notez que vous souhaitez cacher, ne pas être caché, parce que les incendies cachés seulement après le mode total disparaît complètement. Si un utilisateur ouvre une création avant que la vue précédente ne se ferme, elle sera encore peuplée.

J'aime utiliser une liaison personnalisée autour d'un modele pour l'ouvrir / fermer / afficher en fonction de la densité / effacement d'une valeur observable.

Quelque chose comme:

 ko.bindingHandlers.modal = { init: function(element, valueAccessor, allBindings, vm, context) { var modal = valueAccessor(); //init the modal and make sure that we clear the observable no matter how the modal is closed $(element).modal({ show: false, backdrop: 'static' }).on("hidden.bs.modal", function() { if (ko.isWriteableObservable(modal)) { modal(null); } }); //apply the template binding to this element ko.applyBindingsToNode(element, { with: modal }, context); return { controlsDescendantBindings: true }; }, update: function(element, valueAccessor) { var data = ko.utils.unwrapObservable(valueAccessor()); //show or hide the modal depending on whether the associated data is populated $(element).modal(data ? "show" : "hide"); } };

Vous utilisez alors cela contre un observable. Il agit comme un with une liaison contre ce observable et montre / masque le modal en fonction du fait que l'observable est peuplé.

Voici un exemple qui montre cela en cours d'utilisation et configure un abonnement où vous pouvez exécuter un code personnalisé lorsque le mode est fermé. http://jsfiddle.net/rniemeyer/uf3DF/