web-dev-qa-db-fra.com

Knockout.js: plusieurs liaisons ViewModel sur une page ou une partie d'une page

Je me demande s'il est possible d'utiliser Knockout.js's ko.applyBindings() plusieurs fois pour lier différents ViewModels à une partie d'une page. Par exemple, disons que j'avais ceci:

<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);

J'applique maintenant deux liaisons ViewModel à <div id="foo>. Est-ce légal?

mvvmknockout.jsviewmodel
21
ecbrodie

Vous ne voulez pas appeler ko.applyBindings plusieurs fois sur les mêmes éléments. Dans le meilleur des cas, les éléments feront plus de travail que nécessaire lors de la mise à jour, dans le pire des cas, plusieurs gestionnaires d'événements se déclencheront pour le même élément.

Il existe plusieurs options pour gérer ce type de choses qui sont détaillées ici: Exemple de modèle knockoutjs pour les applications à vues multiples

Si vous avez vraiment besoin d'une "île" au milieu de votre contenu que vous souhaitez appeler appliquer des liaisons plus tard, vous pouvez utiliser la technique décrite ici: http://www.knockmeout.net/2012/05 /quick-tip-skip-binding.html

20
RP Niemeyer

Il s'agit d'un barrage routier commun qui survient lors de la mise en œuvre de JqueryMobile-SPA. La méthode: ko.applyBindings (viewmode, root dom element) accepte deux arguments. Le deuxième argument est utile lorsque vous avez plusieurs machines virtuelles sur votre page.

par exemple :

ko.applyBindings(model1, document.getElementById("view1")); 
ko.applyBindings(model2, document.getElementById("view2"));

où vue1 et vue2 sont l'élément dom racine de ce modèle. Pour un JqueryMobile-SPA, ce seront les identifiants de page du modèle correspondant.

16
predhin

La meilleure façon de le faire serait d'utiliser la construction de liaison "avec" dans la div que vous voulez que le modèle de vue partielle soit lié. Vous pouvez le trouver dans ce violon

<div data-bind="with: model">
   <p data-bind="text: name"></p>
</div>

<div data-bind="with: anothermodel">
   <p data-bind="text: name"></p>
</div>​

var model = {
   name: ko.observable('somename'),
}

var anothermodel = {
    name: ko.observable('someanothername'),
}
ko.applyBindings(model);​

Consultez également la "avec" documentation de liaison sur le site Knockout, pour consulter un AJAX - scénario de liaison partielle).

11
Scorpion-Prince

Mon anglais est très mauvais .... =)

J'utilise Sammy pour charger des vues partielles et Knockout pour lier le modèle, j'essaie d'utiliser ko.cleanNode mais nettoie toutes mes liaisons, tous les nœuds DOM ont changé quand a une liaison, une propriété __ko__ est agrégé, puis j'ai supprimé cette propriété avec ce code, et fonctionne !!, '#main' est mon nœud.

var dom = dom || $("#main")[0];
for (var i in dom) {
  if (i.substr(0, 6) == "__ko__") {
     delete (dom[i]);
     break;
  }
}

après utilisation du traducteur Ggle:

J'utilise Sammy pour le chargement des vues partielles, et Knockout pour la liaison du modèle, j'essaie d'utiliser ko.cleanNode mais nettoie toutes mes liaisons, tous les nœuds DOM ont changé quand ils ont une liaison, une propriété ko est agrégé, puis j'ai supprimé cette propriété avec ce code et fonctionne !!, '#main' est mon nœud.

2
user2612497