KnockoutJS/Bootstrap - Effacer le formulaire modal lors de la fermeture du modal en utilisant JavaScript

Question

J'ai un Bootstrap Modal qui contient un formulaire pour mettre à jour ou créer une entité (une entreprise dans mon exemple). En ce moment, mon problème est que si je visualise une entité en utilisant le modal, les champs ne se vident pas lorsque je ferme le modal de quelque manière que ce soit. Cela entraîne le fait que le formulaire reste toujours rempli si je clique ensuite sur un bouton "Créer", ce qui devrait m'ouvrir un modal vide.

Comment puis-je exécuter l'une des méthodes de mes ViewModels à partir de javascript classique ? Voici une partie de 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());
        };

        // Initialiser le 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 "Hidden" du modal de cette manière :

 $('#myModal').on('hidden', function() {
        //Faire quelque chose ici, je ne suis pas sûr de quoi
    });

Answer 1

J'aime utiliser une liaison personnalisée autour d'un modal pour le faire ouvrir/fermer/afficher en fonction du remplissage/vidage d'un observable.

Quelque chose comme :

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindings, vm, context) {
        var modal = valueAccessor();
        //initier le modal et s'assurer que nous vidons l'observable peu importe comment le modal est fermé
        $(element).modal({ show: false, backdrop: 'static' }).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        //appliquer la liaison au modèle à cet élément
        ko.applyBindingsToNode(element, { with: modal }, context);

        return { controlsDescendantBindings: true };
    },
    update: function(element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor());
        //afficher ou masquer le modal en fonction du remplissage des données associées
        $(element).modal(data ? "show" : "hide");
    }
};

Vous utilisez ensuite ceci avec un observable. Il fonctionne comme une liaison with avec cet observable et affiche/masque le modal en fonction que l'observable soit rempli.

Voici un exemple qui montre cela en action et met en place une souscription où vous pourriez exécuter du code personnalisé lorsque le modal est fermé. http://jsfiddle.net/rniemeyer/uf3DF/

Answer 2

fonction ViewModel() {
    var self = this;
    // votre code précédent
    $('#myModal').on('hide', function() {
       self.clearCurrentCompany();
    });
}

Tout simplement. Notez que vous voulez hide, pas hidden, car hidden se déclenche seulement après la disparition complète du modal. Si un utilisateur ouvre une création avant que la vue précédente ne se ferme, elle sera toujours remplie.