web-dev-qa-db-fra.com

Comment effacer le contenu d'un tableau observable qui a été rempli à partir de visites précédentes dans une vue

J'ai une application de page unique qui utilise la suppression pour la liaison de données. La vue CAApproval.html dans mon application d'une seule page a un tableau d'observation nommé AllCertificates dans le code du modèle de vue. Il remplit bien la page. Lorsque vous quittez la vue en cliquant sur un lien dans la partie navigation.html de la page, puis revenez à la page CAApproval, les valeurs de la visite précédente se trouvent toujours dans le tableau observable AllCertificates et sont donc affichées dans la vue CAApproval.

J'ai besoin d'effacer le contenu du tableau observable AllCertificates chaque fois qu'un utilisateur retourne à la page CAApproval qui utilise ce tableau observable de sorte que si un utilisateur quitte la page et revient, le contenu du tableau observable est nul, et donc aucune donnée n'est affichée sur l'écran. Voici les points forts de mon code de viewmodel-

define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService','controls/Lucas'],

       function(logger, system, router, CertificateDataService) {
        var allCertificates = ko.observableArray([]);

    var activate = function () {
            // go get local data, if we have it
            return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums();
            };
        var vm = {
            activate: activate,
            allCertificates: allCertificates,
    SelectAllCerts: SelectAllCerts

        });

    return vm;

    function SelectAllCerts() {
                return CertificateDataService.getallCertificates(allCertificates);
        }
    });

Comment puis-je effacer le contenu d'un tableau observable chaque fois que la page qu'un utilisateur arrive sur cette page (PAS lors de la navigation dans la page elle-même, effacer le tableau observable uniquement lorsque l'utilisateur vient d'une page séparée)?

knockout.jsknockout-2.0single-page-application
41
Chris

Réglez-le simplement égal à rien (allCertificates([])) dans votre fonction d'activation, qui est appelée chaque fois que votre modèle de vue se charge -

function(logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray();

var activate = function () {
    allCertificates([]);
    // go get local data, if we have it
    return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums();
};

var vm = {
    activate: activate,
    allCertificates: allCertificates,
    SelectAllCerts: SelectAllCerts
});
41
PW Kad

Knockout observableArray a également des méthodes intéressantes. Appelez removeAll pour effacer tous les éléments.
Regardez le site officiel manuel du tableau observable .

self.mycertificates = ko.observableArray(['C1', 'C2']);  
self.mycertificates.removeAll();
73
Maxim

Pour Jeremy T (pas assez d'espace en commentaire).
La première raison et absolument suffisante pour moi est l'existence d'une API accessible au public pour le but souhaité.

Mais pour estimer les performances, vous pouvez vérifier la source. "observableArray" est également "observable" avec des fonctions supplémentaires injectées dans l'objet.

L'initialisation ressemble donc à ceci:

ko.observableArray = function (initialValues) {
    initialValues = initialValues || [];

    if (typeof initialValues != 'object' || !('length' in initialValues))
        throw new Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");

    var result = ko.observable(initialValues);
    ko.utils.extend(result, ko.observableArray['fn']);
    return result.extend({'trackArrayChanges':true});
};

ko.observable = function (initialValue) {
    var _latestValue = initialValue;

    function observable() {
        if (arguments.length > 0) {
            // Write

            // Ignore writes if the value hasn't changed
            if (!observable['equalityComparer'] || !observable['equalityComparer'](_latestValue, arguments[0])) {
                observable.valueWillMutate();
                _latestValue = arguments[0];
                if (DEBUG) observable._latestValue = _latestValue;
                observable.valueHasMutated();
            }
            return this; // Permits chained assignments
        }
        else {
            // Read
            ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
            return _latestValue;
        }
    }
    if (DEBUG) observable._latestValue = _latestValue;
    ko.subscribable.call(observable);
    observable.peek = function() { return _latestValue };
    observable.valueHasMutated = function () { observable["notifySubscribers"](_latestValue); }
    observable.valueWillMutate = function () { observable["notifySubscribers"](_latestValue, "beforeChange"); }
    ko.utils.extend(observable, ko.observable['fn']);

    ko.exportProperty(observable, 'peek', observable.peek);
    ko.exportProperty(observable, "valueHasMutated", observable.valueHasMutated);
    ko.exportProperty(observable, "valueWillMutate", observable.valueWillMutate);

    return observable;
}

Et supprimer tous les éléments ressemble à ceci:

'removeAll': function (arrayOfValues) {
        // If you passed zero args, we remove everything
        if (arrayOfValues === undefined) {
            var underlyingArray = this.peek();
            var allValues = underlyingArray.slice(0);
            this.valueWillMutate();
            underlyingArray.splice(0, underlyingArray.length);
            this.valueHasMutated();
            return allValues;
        }
        // If you passed an arg, we interpret it as an array of entries to remove
        if (!arrayOfValues)
            return [];
        return this['remove'](function (value) {
            return ko.utils.arrayIndexOf(arrayOfValues, value) >= 0;
        });
    }
4
Maxim