Knockout.js: fixations multiples de ViewModel sur une page ou une partie de page
je me demande s'il est possible d'utiliser Knockout.js 's ko.applyBindings() plusieurs fois pour lier différents modèles de vue à 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 fixations ViewModel à <div id="foo> . Est-ce légal?
4 réponses
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, vous aurez plusieurs gestionnaires d'événements qui tirent pour le même élément.
il y a plusieurs options pour manipuler ce type de chose qui sont détaillées ici: exemple de modèle knockoutjs pour les applications multi-vue
Si vous avez vraiment besoin d'un "île" au milieu de votre contenu que vous voulez appeler appliquer des fixations sur plus tard, alors vous pouvez utiliser la technique décrite ici: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html
il s'agit d'un blocage de route commun qui vient lors de la mise en œuvre de JqueryMobile-SPA.
La méthode: ko.applyBindings ( viewmode , root dom element ) accepte deux arguments. Le second argument est utile lorsque vous avez plusieurs VM dans votre page.
par exemple:
ko.applyBindings(model1, document.getElementById("view1"));
ko.applyBindings(model2, document.getElementById("view2"));
où view1 et view2 sont l'élément dom racine de ce modèle. Pour un jQueryMobile-SPA, ce sera la page ids du modèle correspondant.
La meilleure façon de le faire serait d'utiliser le "avec" liaison de construire dans le div que vous voulez la vue partielle modèle à être 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 le " avec "Documentation de reliure sur le site de Knockout, pour regarder un scénario de callback AJAX - reliure partielle.
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 nettoyer toutes mes fixations, tous les noeuds DOM ont changé quand a une bind, une propriété __ko__ est agrégée, puis j'ai enlevé cette propriété avec ce code, et fonctionne !!, '#main' est mon noeud.
var dom = dom || $("#main")[0];
for (var i in dom) {
if (i.substr(0, 6) == "__ko__") {
delete (dom[i]);
break;
}
}
après utilisation Traducteur Ggle:
j'utilise Sammy pour la charge de vues partielles, et Knockout pour le bind le modèle, j'essaie d'utiliser ko.cleanNode mais nettoyer toutes mes fixations, tous les noeuds DOM ont changé quand ils ont un bind, une propriété ko est agrégée, puis j'ai enlevé cette propriété avec ce code, et fonctionne !!, '#principal' est mon nœud.