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

Question

J'utilise KnockoutJS et j'ai une vue principale et un modèle de vue. Je veux qu'une boîte de dialogue (celle de jQuery UI) apparaisse avec une autre vue à laquelle un modèle de vue enfant séparé est lié.

Le HTML du contenu de la boîte de dialogue est récupéré en utilisant AJAX, je veux donc pouvoir appeler ko.applyBindings une fois la requête terminée, et je veux lier le modèle de vue enfant à la partie du HTML chargée par ajax à l'intérieur du div de dialogue.

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

Answer 1

ko.applyBindings accepte un second paramètre qui est un élément DOM à utiliser comme 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 devez juste faire attention à ne pas appeler applyBindings plusieurs fois sur les mêmes éléments, car vous aurez plusieurs gestionnaires d'événements attachés.

Answer 2

Bien que la réponse de Niemeyer soit une réponse plus correcte à la question, vous pourrait faites également ce qui 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>

Answer 3

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/

Ce qui est intéressant, c'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]);

Answer 4

Vous devriez regarder le with ainsi que controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html