web-dev-qa-db-fra.com

Pouvez-vous appeler ko.applyBindings pour lier une vue partielle?

J'utilise KnockoutJS et j'ai une vue principale et un modèle de vue. Je souhaite qu'une boîte de dialogue (l'interface utilisateur de jQuery) apparaisse avec une autre vue à laquelle un modèle de vue enfant distinct doit être lié.

Le code HTML du contenu de la boîte de dialogue est extrait à l'aide de AJAX. Par conséquent, je souhaite pouvoir appeler ko.applyBindings une fois la demande terminée et lier le modèle de vue enfant à la partie de la HTML chargé via ajax dans la boîte de dialogue div.

Est-ce réellement possible ou dois-je charger TOUTES mes vues et mes modèles lors du chargement initial de la page, puis appeler une fois ko.applyBindings?

ajaxhtml5knockout.js
254
Charlie

ko.applyBindings accepte un deuxième paramètre qui est un élément DOM à utiliser en tant que racine.

Cela vous permettrait de faire quelque chose comme:

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

Vous pouvez donc utiliser cette technique pour lier un viewModel au contenu dynamique que vous chargez dans votre boîte de dialogue. Globalement, vous voulez juste faire attention à ne pas appeler plusieurs fois applyBindings sur les mêmes éléments, car plusieurs gestionnaires d’événements seront attachés.

430
RP Niemeyer

Alors que la réponse de Niemeyer est une réponse plus correcte à la question, vous pourriez également procéder comme suit:

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

Cela signifie que vous n'avez pas à spécifier l'élément DOM et que vous pouvez même lier plusieurs modèles au même élément, comme ceci:

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
61
mhu

J'ai réussi à lier un modèle personnalisé à un élément au moment de l'exécution. Le code est ici: http://jsfiddle.net/ZiglioNZ/tzD4T/457/

Le bit intéressant est que j'applique l'attribut data-bind à un élément que je n'ai pas défini:

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);
6
ZiglioUK

Vous devriez regarder la liaison with, ainsi que controlsDescendantBindingshttp://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

0
Sam Jacobs