KnockoutJs v2.3.0: Erreur Vous ne pouvez pas appliquer des liaisons plusieurs fois au même élément

Question

J'ai juste mis à niveau vers 2.3.0 et maintenant j'ai l'erreur " Vous ne pouvez pas appliquer les liaisons plusieurs fois le même élément.' que je n'étais pas en 2.2.1.

J'ai une vue partielle de mon MVC contrôleur et de l'ajouter à la page après avoir cliqué sur un href. L'erreur se produit la deuxième fois que je clique sur le lien pour obtenir la vue partielle. Je fais cela plusieurs fois.

Est-il un moyen de le nettoyer et éviter que la nouvelle erreur renvoyé?

Voici mon code:

$.get(url + "GetAssignedCompaniesView?layoutId=" + layoutId + "&noCache=" + new Date().getMilliseconds(), function (result) {
              $("#editAssignedPartial").html($(result));
              showEditAssignedArea(true);
              $(window.document).ready(function () {
                 // error is thrown here
                 ko.applyBindings(self, window.document.getElementById("editAssigned"));
                 $("#layoutId").attr("value", layoutId);
                 updateTypeHiddenElement.attr("value", "companies");
      });
    });

<div id="editAssignedPartial">
</div>

$(document).ready(function () {
  'use strict';
  var vm = new Vm();
  ko.applyBindings(vm, document.getElementById("area1"));
});

Answer 1

Il vous suffit de supprimer les liaisons avant d'utiliser à nouveau 'applyBindings'.

 ko.cleanNode($element[0]);
 

devrait faire l'affaire. HTH.

Answer 2

Vous ne devez jamais appliquer de liaisons plus d'une fois à une vue. Dans la version 2.2, le comportement n'était pas défini, mais toujours non pris en charge. En 2.3, il affiche maintenant correctement une erreur. Lors de l’utilisation de knockout, l’objectif est d’appliquer une seule fois les liaisons à votre page, puis d’utiliser les modifications apportées aux observables sur votre modèle de vue pour modifier l’apparence et le comportement de votre page.

Answer 3

Deux choses sont importantes pour que les solutions ci-dessus fonctionnent:

1. Lors de l'application de liaisons, vous devez spécifier scope (element) !!

2. Lorsque vous effacez des liaisons, vous devez spécifier exactement le même élément que celui utilisé pour la portée.

Le code est ci-dessous

Balisage

 <div id="elt1" data-bind="with: data">
    <input type="text" data-bind="value: text1" >
</form>
 

Vue obligatoire

 var myViewModel = {
  "data" : {
    "text1" : "bla bla"
  }
}:
 

Javascript

 ko.applyBindings(myViewModel, document.getElementById('elt1'));
 

Reliures claires

 ko.cleanNode($('#elt1')[0]);
 

Answer 4

Il y a beaucoup de bonnes réponses à ce problème, mais j'ai une réponse noobie.

J'ai constaté que j'avais accidentellement ajouté le même script à deux endroits et qu'il essayait de se lier deux fois. Donc, avant de vous tirer les cheveux d'une simple erreur, vérifiez ce problème.

Answer 5

Une autre réponse noob . Si vous réutilisez un élément à plusieurs reprises (une boîte de dialogue modale d'amorçage dans mon cas), l'appel de ko.applyBindings(el) plusieurs reprises entraînera ce problème.

Au lieu de cela, faites-le une fois comme ceci:

 if (!applied) {
    ko.applyBindings(el);
    applied = true;
}
 

Ou comme ceci:

 var apply = function (viewModel, containerElement) {
    ko.applyBindings(viewModel, containerElement);
    apply = function() {}; // only allow this function to be called once.
}
 

PS: Cela peut vous arriver plus souvent si vous utilisez le plug-in de mappage et convertissez vos données JSON en observables.