Comment effacer / supprimer les fixations observables dans Knockout.js?

pour un projet sur lequel je travaille, j'ai écrit une simple fonction ko.unapplyBindings qui accepte un noeud jQuery et le booléen remove. Il déborde d'abord tous les événements jQuery comme ko.cleanNode méthode ne prend pas soin de cela. J'ai vérifié les fuites de mémoire, et il semble que ça fonctionne très bien.

ko.unapplyBindings = function ($node, remove) {
    // unbind events
    $node.find("*").each(function () {
        $(this).unbind();
    });

    // Remove KO subscriptions and references
    if (remove) {
        ko.removeNode($node[0]);
    } else {
        ko.cleanNode($node[0]);
    }
};

vous pouvez essayer d'utiliser l'avec reliure que knockout offre: http://knockoutjs.com/documentation/with-binding.html L'idée est d'utiliser Appliquer des consolidations une fois, et chaque fois que vos données changent, mettez simplement à jour votre modèle.

disons que vous avez une vue de haut niveau modèle storeViewModel, votre panier représenté par cartViewModel, et une liste d'articles dans ce panier - dire cartItemsViewModel.

vous lieriez le modèle de haut niveau - le storeViewModel à toute la page. Ensuite, vous pouvez séparer les éléments de votre page, qui sont responsables de chariot ou panier articles.

laisse supposer que le nouveau modèle cartitemsview a la structure suivante:

var actualCartItemsModel = { CartItems: [
  { ItemName: "FirstItem", Price: 12 }, 
  { ItemName: "SecondItem", Price: 10 }
] }

le nouveau modèle cartitemsview peut être vide au début.

Les étapes ressemblerait à ceci:

1. définir les reliures en html. Séparer le nouveau modèle cartitemsview contraignant.

     
       <div data-bind="with: cartItemsViewModel">
         <div data-bind="foreach: CartItems">
           <span data-bind="text: ItemName"></span>
           <span data-bind="text: Price"></span>
         </div>
       </div>
     
   

2. le modèle store provient de votre serveur (ou est créé de toute autre manière).

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

3. définissez les modèles vides sur votre modèle de vue de haut niveau. Ensuite, une structure de ce modèle peut être mise à jour avec données réelles.

     
       storeViewModel.cartItemsViewModel = ko.observable();
       storeViewModel.cartViewModel = ko.observable();
    
   

4. lient le modèle de vue de niveau supérieur.

   ko.applyBindings(storeViewModel);

5. lorsque l'objet cartItemsViewModel est disponible, alors assignez-le au placeholder défini précédemment.

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

si vous souhaitez vider le panier articles: storeViewModel.cartItemsViewModel(null);

Knockout prendra soin de html-i.e. il apparaîtra quand le model n'est pas vide et le contenu de div (celui avec Le "with binding") disparaître.

je dois appeler ko.applyBinding chaque fois que le bouton de recherche clique, et les données filtrées est de retour à partir du serveur, et dans ce cas suivant le travail pour moi sans utiliser ko.cleanNode.

j'ai expérimenté, si nous remplaçons foreach avec modèle alors il devrait fonctionner très bien en cas de collections/observableArray.

, Vous pouvez trouver ce scénario utile.

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

au lieu d'utiliser les fonctions internes de KO et de s'occuper de l'enlèvement du gestionnaire d'événements général de JQuery, une bien meilleure idée est d'utiliser des reliures with ou template . Quand vous faites cela, ko re-crée cette partie de DOM et donc il est automatiquement nettoyé. Ceci est également recommandé, voir ici: https://stackoverflow.com/a/15069509/207661 .

je pense qu'il pourrait être préférable de garder la liaison tout le temps, et simplement mettre à jour les données qui y sont associées. J'ai rencontré ce problème, et j'ai trouvé que simplement appeler en utilisant la méthode .resetAll() sur le tableau dans lequel je gardais mes données était le moyen le plus efficace pour le faire.

fondamentalement, vous pouvez commencer avec un var global qui contient des données à rendre via le ViewModel:

var myLiveData = ko.observableArray();

il m'a fallu un certain temps pour réaliser que je on ne pouvait pas faire de myLiveData un tableau normal -- la partie ko.oberservableArray était importante.

, Alors vous pouvez aller de l'avant et faire ce que vous voulez myLiveData . Par exemple, faites un $.getJSON appel:

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

une fois que vous avez fait cela, vous pouvez aller de l'avant et appliquer des fixations en utilisant votre modèle de vue comme d'habitude:

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());

alors dans le HTML il suffit d'utiliser myData comme vous le feriez normalement.

De cette façon, vous pouvez juste muck avec myLiveData de n'importe quelle fonction. Par exemple, si vous voulez mettre à jour toutes les quelques secondes, enveloppez cette ligne $.getJSON dans une fonction et appelez setInterval dessus. Vous n'aurez jamais besoin d'enlever la reliure aussi longtemps que vous vous rappelez de garder la ligne myLiveData.removeAll(); .

à moins que vos données ne soient vraiment énormes, les utilisateurs ne seront même pas en mesure de remarquer le temps entre la réinitialisation du tableau et l'ajout des données les plus récentes.

j'ai eu un problème de fuite de mémoire récemment et ko.cleanNode(element); ne le ferait pas pour moi - ko.removeNode(element); l'a fait. Javascript + Knockout.js memory leak - comment s'assurer que l'objet est détruit?

avez-vous pensé à ceci:

try {
    ko.applyBindings(PersonListViewModel);
}
catch (err) {
    console.log(err.message);
}

j'ai trouvé ça parce que dans Knockout, j'ai trouvé ce code

    var alreadyBound = ko.utils.domData.get(node, boundElementDomDataKey);
    if (!sourceBindings) {
        if (alreadyBound) {
            throw Error("You cannot apply bindings multiple times to the same element.");
        }
        ko.utils.domData.set(node, boundElementDomDataKey, true);
    }

donc pour moi ce n'est pas vraiment une question que son déjà lié, c'est que l'erreur n'a pas été attrapé et traité...

j'ai trouvé que si le modèle de vue contient de nombreuses fixations div, la meilleure façon d'effacer le ko.applyBindings(new someModelView); est d'utiliser: ko.cleanNode($("body")[0]); cela vous permet d'appeler un nouveau ko.applyBindings(new someModelView2); de manière dynamique sans que le souci du modèle de vue précédent soit toujours lié.